На заре веб дизайна табличный способ верстки был стандартом де-факто. Таблицы использовали везде, где только можно. Например, чтобы сделать отступ справа, делали пустую ячейку таблицы. Если необходимо было разместить несколько элементов внутри ячейки таблицы, туда вставляли еще одну вложенную таблицу.
В итоге, конечный код документа представлял собой очень сильно вложенный код, состоящий из огромного количества таблиц. Это иногда мне напоминает программы на бейсике, которые мы писали в школе. Мы тогда не знали, что существуют функции и процедурное программирование, поэтому наши программы были одной сплошной "макарониной" с глубоким уровнем вложенности.
Сейчас, все большую популярность (особенно в стиле Web 2.0) набирает без-табличный способ верстки веб страниц на основе CSS свойства position. Даже в некоторых вакансиях я видел основное требование к веб дизайнеру это умение без таблиц верстать HTML код.
Как установить позиционирование элементов
Для установки позиционирования существует CSS свойство position. Оно может принимать одно из пяти значений:
- static
- relative
- absolute
- fixed
- inherit
По умолчанию значение этото свойства равно - static. Т.е. если значение свойства position явно не указано, то элемент будет статически позиционирован. Это важно. Значение свойства position не наследуется по-умолчанию. Чтобы значение наследовалось от родительского элемента, необходимо для дочернего элемента явно выставить свойство position равным inherit, например, так:
a.link{
position: inherit;
}
В данном случае позиционирование ссылки будет таким же как и у родительского элемента.
Статическое позиционирование
Статическое позиционирование - это, вобщем-то, и не позиционирование совсем. Его не нужно указывать явно, так как это значение по умолчанию. Один из возможных вариантов его явного использования - это отменять глобальное правило примененное ранее. Вот простейший пример:
div {position:absolute}
#new {position:static}
В данном случае всем элементам div назначено абсолютное позиционирование. А вот у тех элементов, у которых установлен id="new" позиционирование будет статическим. Грубо говоря, второе правило отменяет первое для некоторых элементов.
Статическое позиционирование означает, что элемент располагается сразу же после элемента, который предшествует ему в структуре документа HTML.
Относительное позиционирование
Относительное позиционирование - это позиционирование относительно... самого элемента. Как это не странно звучит - это правда.
Вот как это работает в теории: положение элемента в контексте разметки страницы остается тем же, как если бы позиционирование было статическим. А вот отображается элемент в другом месте, координаты которого задаются относительно его статического положения. |
