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

2009-03-13, Автор - Ленар Хайруллин; [1844]

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


Для начала рассмотрим различные возможности позиционирования элементов и разберём их отличия. Нам доступны четыре типа позиционирования, каждый из которых задается свойством position.

position (static | relative | absolute | fixed | inherit)

По умолчанию мы имеем значение static. Данное css свойство применимо ко всем элементам на странице. С помощью свойства position осуществляется выбор одного из четырёх методов позиционирования. Рассмотрим каждый подробнее.
static – позиционирование по умолчанию – прямоугольники элементов отображаются в порядке их описания в документе.
relative – в данному случае осуществляется перемещение прямоугольника элемента, но изначальное пространство для него в документе остаётся за ним.
absolute – задает абсолютное позиционирование. В данном случае, элемент не влияет на размещение других, окружающих его элементов. Элементы с таким позиционированием фактически являются блоками (по поведению).
fixed – аналогичен absolute, однако положение элемента определяется относительно окна браузера.

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

top,right,bottom,left (длина | процент | auto | inherit)

По умолчанию auto. Применимо только к позиционируемым элементам типа relative,absolute,fixed. Значение, которое будет задано для каждого из этих свойств означает расстояние, на которое будет осуществлен сдвиг от выбранного края. Например, значение свойства left определяет расстояние между левым краем блока и левым внешним краем самого элемента.

Одной из проблем позиционирования является проблема обработки «непредвиденных» случаев. Допустим, вы задали позиционирования для элемента и вставили туда текст. Затем текст был изменён в базе данных, автоматически он изменился на странице – добавилось несколько абзацев и… И он перестал помещаться в выбранную Вами область. Для обработки таких проблем нам пригодится свойство overflow.

overflow (visible | hidden | scroll | auto | inherit)

По умолчанию значение visible. Применимо к любым элементам уровня блока и замещаемым элементам. Рассмотрим смысл этих значений подробно.
visible – данный режим позволяет вывод контента вне пределы выделенной для него области.
hidden – если контент не умещается в выделенную ему область, «лишний» текст будет отсекаться. Видно на странице его не будет.
scroll – данное значение добавляет к элементу размещения полосы прокрутки, таким образом, пользователь имеет возможность просмотреть тот текст, который не уместился в данной области, используя скролл. Необходимо заметить, что при выборе этого значения, полосы прокрутки будут видны даже тогда, когда весь текст умещается в свои пределы.
auto – кладет обработку данной ситуации на плечи броузеру, предоставляя ему право включать и выключать полосы прокрутки, в зависимости от наполнения блока контентом.

Теперь вернёмся к непосредственному позиционированию. Одним из распространенных приемов позиционирование – является наложение «слоев». По умолчанию наложение элементов происходит в порядке их появления в документе, при этом более «поздние» отображаются поверх тех, которые следовали до них. Для изменения этого необходимо использовать свойство z-index. Это свойство принимает любое целочисленное значение, как положительное, так и отрицательное. Соответственно, чем больше это значение, тем «выше» данный слой будет наложен. Можете поэкспериментировать с этим свойством, наложив друг на друга несколько блоков различного цвета (для наглядности).

Наконец, один из наиболее важных моментов позиционирования: абсолютное позиционирование.

Абсолютно позиционируемые элементы можно описать следующим образом:
  • Для объявления элементов служит констуркция {position : absolute;}.

  • Элементы располагаются относительно краев блока с учетом одного или нескольких свойств, определяющих сдвиг (top,right,bottom,left).

  • Элементы в такой позиции полностью исключаются из потока содержимого документа.

  • Комментарии:
    Последние комментарии на сайте:
    Поделиться в социальных сетях:


    Предварительный обзор Huawei Honor V10. ...
    Предварительный обзор Huawei Honor V10. Мы давно поняли, что Apple перестала быть инновационной компанией, хотя это мнение и притянуто за уши раз...
    Обзор Micropolis. Странный симулятор...
    Обзор Micropolis. Странный симуляторСовременные мобильные игры потеряли свою уникальность и из-за этого игроку не интересно играть. Сами пони...
    Предварительный обзор Oppo R11s Plus. Ши...
    Предварительный обзор Oppo R11s Plus. ШиРанее компания Oppo и ее продукция была нам менее интересной, так как официально на территории России куп...
    Обзор Rules of Survival. Замена PUBG...
    Обзор Rules of Survival. Замена PUBGУспех игры PUBG не дает спокойно спать разработчикам и те постоянно пытаются если не превзойти этот «шеде...
    Предварительный обзор Kinesis Freestyle ...
    Предварительный обзор Kinesis Freestyle Рынок игровой периферии в последнее время поражает с каждым днем все больше и больше - производители ради...
    Обзор Battle of Arrow. Отличный мультипл...
    Обзор Battle of Arrow. Отличный мультиплПроблемой большинства современных мобильных игр является банальная скука - пользователь не получает удово...
    Обзор Illuminati. Покоряем мир...
    Обзор Illuminati. Покоряем мирНаверное, в современном мире нет образованного человека, который бы не слышал про сообщество Иллюминатов....
    Безрамочный Asus ZenFone Max Plus официа...
    Безрамочный Asus ZenFone Max Plus официа28 ноября в Москве прошла презентация нового смартфона Asus ZenFone Max Plus. Он стал первым безрамочны...
    Обзор Deppa Mage Steel и Mage One. Автом...
    Обзор Deppa Mage Steel и Mage One. АвтомСовременные автомобили буквально напичканы множеством интересных решений, предназначенные для комфорта во...
    Обзор Room Planner 3D for IKEA. Создаем ...
    Обзор Room Planner 3D for IKEA. Создаем Современные смартфоны получили достаточно производительности, дабы запускать сложнейшие алгоритмы, но бол...
    Обзор Titan Quest: Ragnarök. Вы готовы к...
    Обзор Titan Quest: Ragnarök. Вы готовы кВыпускать DLC к игре, которая вышла более чем десять лет назад, воистину героическое решение - оригинальн...
    Предварительный обзор Xiaomi Redmi Note ...
    Предварительный обзор Xiaomi Redmi Note Компании из Китая давно доказали всем на планете, что они могут и умеют делать смартфоны так, как не дела...
    МегаОбзор
    МегаОбзор
    MegaObzor в социальных сетях:
    Яндекс.Метрика
    2006-2017 © MegaObzor