Правильное расположение элементов на веб-страницах является необходимостью для хорошего дизайна. В CSS есть несколько методов, которые вы можете использовать для позиционирования элементов.

В этом разделе мы разберем основные методы позиционирования.

Позиционирование static

Статически позиционированный элемент всегда позиционируется в соответствии с обычным потоком страницы. HTML-элементы по умолчанию расположены статически. На статические элементы не влияют свойства top, bottom, left, right, и z-index.

.box {
    padding: 20px;
    background: #7dc765;
}

Позиционирование relative

Относительно позиционированный элемент позиционируется относительно его нормального положения.

В схеме относительного позиционирования положение ячейки элемента рассчитывается в соответствии с нормальным потоком. Затем поле смещается из этого нормального положения в соответствии со свойствами — top или bottom и/или left или right.

.box {
    position: relative;
    left: 100px;
}

Относительно позиционированный элемент может перемещаться и перекрывать другие элементы, но он сохраняет пространство, изначально зарезервированное для него, в обычном потоке.

Позиционирование absolute

Абсолютно позиционированный элемент позиционируется относительно первого родительского элемента, который имеет position, отличный от static. Если такой элемент не найден, он будет расположен на странице относительно левого верхнего угла окна браузера. Смещения бокса можно указать с помощью одного или нескольких свойств top, right, bottom и left.

Абсолютно расположенные элементы полностью исключаются из нормального потока и, таким образом, не занимают места при размещении родственных элементов. Однако такой элемент может перекрывать другие элементы в зависимости от значения свойства z-index. Кроме того, абсолютно позиционированный элемент может иметь поля margins, и они не разрушаются вместе с другими полями.

.box {
    position: absolute;
    top: 200px;
    left: 100px;
}

Позиционирование fixed

Фиксированное позиционирование является подвидом абсолютного позиционирования.

Единственное отличие состоит в том, что элемент фиксируется относительно области просмотра браузера viewport и не перемещается при прокрутке.

.box {
    position: fixed;
    top: 200px;
    left: 100px;
}

В случае типа print media фиксировано позиционированный элемент отображается на каждой странице и фиксируется по отношению к блоку страницы (даже в режиме предварительного просмотра). IE7 и IE8 поддерживают фиксированное значение, только если указано <!DOCTYPE>.

Похожие посты

Руководство по свойству opacity в CSS

CSS-свойство opacity означает непрозрачность и теперь является частью спецификаций CSS3. Старые браузеры имеют разные способы управления непрозрачностью. Opacity в Firefox, Safari, Chrome, Opera и IE9 Вот самый простой синтаксис для назначения непрозрачности CSS во всех современных браузерах. Приведенное выше правило сделает элемент абзаца непрозрачным на 70% (или прозрачным на 30%). Свойство opacity принимает значение от…

Руководство по таблицам в CSS

Таблицы обычно используются для отображения каких-либо упорядоченных табличных данных. После того, как вы создали HTML-таблицу, с помощью CSS вы можете значительно улучшить ее внешний вид. CSS предоставляет несколько свойств, которые позволяют вам управлять компоновкой и представлением элементов таблицы. В этом разделе вы увидите, как использовать CSS для стилизации таблиц. Добавление границ (border) в таблицы CSS-свойство…

Руководство по свойству margin в CSS

CSS-свойство margin позволяют вам установить интервал вокруг границы элемента (или края блока элемента, если у него нет определенной границы). На цвет элемента не влияет цвет фона background-color, он всегда прозрачен. Однако, если родительский элемент имеет цвет фона, он будет виден через область margin. Margin для отдельных сторон Вы можете установить margin для отдельных сторон используя…

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.