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

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

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

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

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


    Предварительный обзор Xtrfy K3. Новая иг...
    Предварительный обзор Xtrfy K3. Новая игШведская киберспортивная организация Ninjas in Pyjamas, которая была организована в 1999 году и сейчас яв...
    Обзор Eternal. Очень крутая карточная иг...
    Обзор Eternal. Очень крутая карточная игМы следим за развитием игры Eternal еще с того времени, когда информация о проекте только появилась, а по...
    Предварительный обзор BlackBerry Motion....
    Предварительный обзор BlackBerry Motion.Стоит отметить, что еще за две недели до официального анонса смартфона BlackBerry Motion, продукт уже был...
    Предварительный обзор Samsung HMD Odysse...
    Предварительный обзор Samsung HMD OdysseШлем виртуальной реальности это всегда интересно - производители со всего мира стараются создать сио идеа...
    Предварительный обзор Maze Alpha X. Неск...
    Предварительный обзор Maze Alpha X. НескВ последнее время китайские мобильные телефоны пользуются громадным спросом по той причине, что они дешев...
    Обзор Dungeons 3. Это невероятно весело...
    Обзор Dungeons 3. Это невероятно веселоКогда Kalypso Media и Realmforge Studios анонсировали свою новую игру Dungeons 3 и назвали ее самым обшир...
    Lenovo Explorer. Доступный VR в массы...
    Lenovo Explorer. Доступный VR в массыНе так давно на прошедшей выставке IFA 2017 был представлен шлем виртуальной реальности Lenovo Explorer, ...
    Обзор HOB. Очень атмосферная игрушка...
    Обзор HOB. Очень атмосферная игрушкаИгра Hob это что-то, что сложно описать словами и вам скорее нужно попробовать ее самостоятельно, дабы оц...
    Предварительный обзор Google Pixel 2. Не...
    Предварительный обзор Google Pixel 2. НеБуквально пару дней назад состоялся официальный анонс мобильного телефона Google Pixel 2 и его старшей ве...
    Обзор Total War: WARHAMMER II. Хорошо, к...
    Обзор Total War: WARHAMMER II. Хорошо, кХорошая, правильная механика боя в Total War была продумана и доделана уже достаточно давно, так что кажд...
    Предварительный обзор Patriot Viper V570...
    Предварительный обзор Patriot Viper V570Пользователи привыкли, что мышки хорошие выпускают только именитые бренды вроде ASUS или Razer и относятс...
    Обзор Яндекс.Метро. Удобно и быстро...
    Обзор Яндекс.Метро. Удобно и быстроДанный обзор будет интересен в первую очередь жителям Москвы, так как рассказывать о приложении я буду им...
    МегаОбзор
    МегаОбзор
    MegaObzor в социальных сетях:
    Яндекс.Метрика
    2006-2017 © MegaObzor