Теоретический вопрос.
Во-первых здравствуйте. Во-вторых прошу прощения если не там создал тему и вообще если такая тема тут не нужна. Я понимаю что существует много литературы по данной тематике, но нигде не нашел ответа на свой вопрос. Вопрос заключается вот в чем. В css расположение блока всегда ведется от верхнего левого угла, или же от расположения предыдущего? Просто добиваться результата путем подбора значений это не совсем тру решение. Ведь куда быстрее будет двигаться дело, если ты понимаешь, что ты пишешь... В принципе я понимаю что пишу, но не могу понять принципов работы. То есть именно то, о чем я спрашиваю. Буду очень признателен если не будете закидывать тухлыми яйцами, а ответите на вопрос. Желательно с пояснением. Заранее благодарен.
|
Цитата:
|
|
Но есть такое свойство ЦСС как позишн. А так же свойства "сателиты"
- топ - боттом - лефт - райт Все это в совокупности может коренным образом менять "точку отсчёта" при расположении элемента. Так же и сам элемен не всегда волен находиться где угодно... Например ячейка таблицы. |
ksa,
как я понимаю эти сателиты уже располагают элемент относительно сторон. Тоесть если есть некая точка с свойствами top: 50%; left: 50%(центр экрана) следующие свойства этого же элемента margin-top: 20px; margin-left: 30pxбудут применяться относительно топа и лефта? |
да. Это хитрость расположения любого блока по центру если известны размеры без JS
|
Цитата:
Цитата:
Отступы и поля применяются ко всему элементу. А не относительно топа и лефта (как в твоём случае). Т.е. позишн определит "поточнось" элемента и его "тип" позиционирования. Свойства "сателиты" поставят его в указаное место - все, точка. "Смещение" элемента отступами и полями это вроде как "особенность", нежели именно "позиционирование"... Даже если ты и увидишь элемент в нужном тебе месте (после отступов и полей) не факт что "окружающие" элементы будут вести себя как ты бы хотел. :) |
Цитата:
#logo {
top: 5%;
left: 50%;
width: 100%;
height: 150px;
}
и есть таблица в этом диве .image {
position: absolute;
top: 50%;
left: 50%;
width: 200px;
height: 60px;
margin-top: -30px;
margin-left: -100px;
}
то свойства таблицы буду применяться относительно дива? |
Цитата:
Вот пример... <!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<style type='text/css'>
#logo {
position: absolute;
top: 5%;
left: 50%;
width: 30%;
height: 150px;
border: 1px solid;
}
.image {
position: absolute;
top: 50%;
left: 50%;
width: 200px;
height: 60px;
margin-top: -30px;
margin-left: -100px;
border: 1px solid;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div id='logo'>
<table class='image'>
<tr>
<td>test</td>
</tr>
</table>
</div>
</body>
</html>
|
Так, ну уже что-то стало вырисовываться. Спасибо за разъяснения. Буду задавать вопросы по мере поступления. Ну а пока с этим разобрался. :)
|
| Часовой пояс GMT +3, время: 11:33. |