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

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

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

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

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


    Предварительный обзор Lenovo K8 Note. Ши...
    Предварительный обзор Lenovo K8 Note. ШиМобильный телефон Lenovo K8 Note интересен не только своим внешним видом, начинкой и прочими моментами, о...
    Обзор Space Frontier. Развлекаемся по-пр...
    Обзор Space Frontier. Развлекаемся по-прДалеко не все игровые продукты создаются с целью придумать что-то новое, дать игроку возможность играть в...
    Предварительный обзор Sharp Aquos S2. Ин...
    Предварительный обзор Sharp Aquos S2. ИнБольшинство производителей мобильных телефонов сейчас стараются выпустить свои устройства с минимальными ...
    Обзор Colorcube. Слишком красиво...
    Обзор Colorcube. Слишком красивоЕсть определенный тип игровых продуктов на мобильной платформе, который загружают исключительно ради эсте...
    Обзор Flippy Knife. Как залипнуть на час...
    Обзор Flippy Knife. Как залипнуть на часЕсли честно, от игры Flippy Knife я не ожидал ничего серьезного - сразу видно, что продукт создавали с пр...
    Предварительный обзор Fly Selfie 1. Смар...
    Предварительный обзор Fly Selfie 1. СмарВ последнее время мы достаточно часто стали замечать смартфоны, которые создаются разработчиками специаль...
    Обзор Spin Addict. Очень красивая игра...
    Обзор Spin Addict. Очень красивая играИгра Spin Addict мне сразу понравилась своей иконкой, скажу без тени стеснения. Обычно казуальные игры за...
    Предварительный обзор Shuttle X1. Компак...
    Предварительный обзор Shuttle X1. КомпакСовременные игровые решения оказываются либо достаточно дорогими и не сильно мощными при такой стоимости,...
    Обзор Fortnite. Стрельба крафту не помех...
    Обзор Fortnite. Стрельба крафту не помехНаверное, многие пользователи ожидают, что мы скажем, будто ожидали от игры худшего и так далее, но на са...
    Китайские роботы UBTech Robotics пришли ...
    Китайские роботы UBTech Robotics пришли Прогресс не стоит на месте: наши родители играли в детстве с металлическим конструктором, мы – с пластико...
    Предварительный обзор Micromax Canvas Se...
    Предварительный обзор Micromax Canvas SeВ последнее время разработчикам мобильных телефонов все сложнее создавать действительно хорошие продукты ...
    Предварительный обзор Samsung Leader 8. ...
    Предварительный обзор Samsung Leader 8. Стоит отметить, что данные о смартфоне Samsung Leader 8 утекли в сеть достаточно давно - мы еще зимой гов...
    МегаОбзор
    МегаОбзор
    MegaObzor в социальных сетях:
    Яндекс.Метрика
    2006-2017 © MegaObzor