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

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

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

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

  • Комментарии:
    Обзор Hyundai H-LCD900. Лучший автомобил...
    Обзор Hyundai H-LCD900. Лучший автомобилНе манит нас берег турецкий. Немало россиян в текущем году планируют провести отпуск, не выезжая из Росси...
    Смартфон Meizu 15 оценен в 35 тысяч рубл...
    Смартфон Meizu 15 оценен в 35 тысяч рублКомпания Meizu объявила российские цены на смартфоны Meizu 15, 15 Plus и 15 Lite, которые были официально...
    Acer Predator Helios 300 Special Edition...
    Acer Predator Helios 300 Special EditionКомпания Acer пополнила ассортимент игровых ноутбуков моделью Predator Helios 300 Special Edition (PH315-...
    Представлены игровые ИБП AeroCool Aero S...
    Представлены игровые ИБП AeroCool Aero SAeroCool представили линейку стильных геймерских ИБП Aero Shield. Все новинки, от самой простой модели до...
    Huawei MediaPad M5 официально представле...
    Huawei MediaPad M5 официально представле22 мая в Москве состоялась прзеентация Huawei, на которой показали планшеты премиум сегмента Huawei Media...
    Представлена беззеркальная камера Fujifi...
    Представлена беззеркальная камера FujifiКак и ожидалось, сегодня компания Fujifilm представила беззеркальную камеру X-T100. Новинка характеризует...
    Поделиться в социальных сетях:


    Предварительный обзор HP Curved AiO 34. ...
    Предварительный обзор HP Curved AiO 34. В последнее время пользователи стали все больше внимания обращать на моноблоки, так как это решение наибо...
    Обзор PirateCode. Война в море...
    Обзор PirateCode. Война в мореВ последнее время пользователи стали больше играть в соревновательные игры, а разработчики мобильных прое...
    Sony представила новую линейку телевизор...
    Sony представила новую линейку телевизор17 мая в Москве состоялась презентация Sony, на которой показали новые телевизоры BRAVIA. В линейку вошли...
    Предварительный обзор Xiaomi Mi TV 4S. Т...
    Предварительный обзор Xiaomi Mi TV 4S. ТВ последнее время телевизоры стали заметно умнее, но производители все еще пытаются продавать их по грома...
    Обзор FlipTheGun. Постреляем...
    Обзор FlipTheGun. ПостреляемСовременные мобильные игры направлены на два типа пользователей — первый хочет играть в короткие сессии, ...
    В Иннополисе открыта опытная зона сети н...
    В Иннополисе открыта опытная зона сети н21 мая, Иннополис, Татарстан. ПАО «Ростелеком», ПАО «Таттелеком», компания Huawei и Министерство информат...
    Предварительный обзор Logitech G305. Бюд...
    Предварительный обзор Logitech G305. БюдИгровая периферия перестала быть просто устройством ввода — теперь каждый геймер хочет получить настоящег...
    Обзор Ladybug. Раннеры снова в моде...
    Обзор Ladybug. Раннеры снова в модеСтоит сказать, что еще несколько лет назад раннеры были очень популярными — буквально каждый день выходил...
    Предварительный обзор Xiaomi Redmi S2. Н...
    Предварительный обзор Xiaomi Redmi S2. НКитайские смартфоны перестали быть чем-то странным и отвергнутым — сейчас некоторые бренды Поднебесной вы...
    Обзор Iron Throne. Netmarble вновь порад...
    Обзор Iron Throne. Netmarble вновь порадКажется буквально недавно любители мобильных игр и фанаты La2 сумели с достоинством оценить появившуюся L...
    Компания ASUS анонсирует старт продаж ма...
    Компания ASUS анонсирует старт продаж маВ материнских платах ROG, ROG Strix, Prime и TUF Gaming для высокопроизводительных процессоров AMD Ryzen ...
    «Академия безопасного вождения Ford» дл...
    «Академия безопасного вождения Ford»  длЭкспертный центр «Движение без опасности» в партнерстве с компанией Ford Sollers обяъвили о старте нового...
    
    МегаОбзор
    МегаОбзор
    MegaObzor в социальных сетях:
    Яндекс.Метрика
    2006-2018 © MegaObzor