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

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

Вопросы позиционирования элементов средствами 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).

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

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


    Предварительный обзор Xiaomi Redmi Note ...
    Предварительный обзор Xiaomi Redmi Note Релиз смартфона Xiaomi Redmi Note 5 не стал для пользователей большим удивлением. На то были свои причины...
    Обзор Lost Socks: Naughty Brothers. Муль...
    Обзор Lost Socks: Naughty Brothers. МульНельзя сказать, что игра Lost Socks: Naughty Brothers является чем-то новым и невероятным, ведь разработч...
    Сверхмощный Predator Orion 9000 официаль...
    Сверхмощный Predator Orion 9000 официаль19 февраля в Москве состоялась презентация мощного игрового компьютера Predator Orion 9000. На данный мом...
    Предварительный обзор Raijintek Macula 1...
    Предварительный обзор Raijintek Macula 1Многие пользователи уверены, что компьютер является лишь средством запуска красивых игрушек на экран мони...
    Предварительный обзор Bid Wars. Война на...
    Предварительный обзор Bid Wars. Война наЯ уже не раз говорил, что современные игровые продукты для мобильной платформы не вызывают радости и счас...
    Candy Hoover Group подвела итоги 2017 го...
    Candy Hoover Group подвела итоги 2017 го16 февраля в Москве состоялась пресс-конференция Candy Hoover Group, на которой были подведены итоги прош...
    Предварительный обзор Corsair K63 Wirele...
    Предварительный обзор Corsair K63 WireleБуквально несколько недель назад мы говорили о том, что мембранные клавиатуры ушли далеко вперед в сравне...
    Обзор Cash Inc. Заработаем виртуальные м...
    Обзор Cash Inc. Заработаем виртуальные мЯ могу смело сказать, что разработчики большинства мобильных продуктов не делают ничего, чтобы пользовате...
    Предварительный обзор HP EliteDisplay Z2...
    Предварительный обзор HP EliteDisplay Z2Современный рынок мониторов постепенно меняется в сторону 4К и этот формат уже стал более-менее доступным...
    Обзор Secret of Mana. Ремейк, который ст...
    Обзор Secret of Mana. Ремейк, который стСтоит сказать, что ремастеред Secret of Mana будет интересен в первую очередь тем пользователям, которые ...
    Обзор Skyway Energy Fast. Беспроводная з...
    Обзор Skyway Energy Fast. Беспроводная зБеспроводные зарядные устройства постепенно набирают высокую популярность среди пользователей флагманских...
    Обзор Armored Warfare: Проект Армата. Ка...
    Обзор Armored Warfare: Проект Армата. КаИгра Armored Warfare: Проект Армата вышла в свет относительно недавно - мы писали обзор где-то в 2015 год...
    МегаОбзор
    МегаОбзор
    MegaObzor в социальных сетях:
    Яндекс.Метрика
    2006-2018 © MegaObzor