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

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

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

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

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

  • Комментарии:
    7 ключевых особенностей смартфона UMIDIG...
    7 ключевых особенностей смартфона UMIDIGUMIDIGI представила свою новую модель UMIDIGI Z2 Pro , объявив ее «технологическим пионером, новым флагм...
    Poptel P10 станет конкурентом Samsung Ga...
    Poptel P10 станет конкурентом Samsung GaЗащищенные смартфоны не получают широкого распространения, но свой определенный круг покупателей определе...
    UMIDIGI One и One Pro вышли в интересных...
    UMIDIGI One и One Pro вышли в интересныхUMIDIGI One и One Pro получили экран с соотношением сторон 19:9 и тонкие рамки. Новинки оснащены парой ст...
    Обзор TOTOLINK A810R. Двухдиапазонный ро...
    Обзор TOTOLINK A810R. Двухдиапазонный роWi-Fi сети получили широкое распространение, большинство из нас ежедневно пользуется этой технологией дом...
    Смартфон Huawei Honor 8X засветился в ба...
    Смартфон Huawei Honor 8X засветился в баВ базе данных китайского центра по сертификации телекоммуникационного оборудования TENAA появились сведен...
    Xiaomi Mi A2 теперь снимает видео Full H...
    Xiaomi Mi A2 теперь снимает видео Full HКомпания Xiaomi выпустила обновление для смартфона Mi A2, которое помимо прочего расширяет фотовозможност...
    Обзор LEXAND R2 Stone. Кнопочный телефон...
    Обзор LEXAND R2 Stone. Кнопочный телефонНесмотря на общее смещение акцента на смартфоны с сенсорными экранами, кнопочные телефоны еще рано списыв...
    Поделиться в социальных сетях:


    Предварительный обзор Logitech Powered. ...
    Предварительный обзор Logitech Powered. Компания Apple на своей презентации в октябре прошлого года рассказала про свою беспроводную зарядку, кот...
    Обзор Hollywhoot. Снимаем свои фильмы...
    Обзор Hollywhoot. Снимаем свои фильмыБольшинство современных мобильных игр создают без идеи и реализуют весьма плохо. Это не новость, ведь раз...
    ТОП-10 лучших игр для Android 2018 года...
    ТОП-10 лучших игр для Android 2018 годаВ последние годы мобильные игры развиваются семимильными шагами. Производители смартфонов улучшают свои м...
    Предварительный обзор Cooler Master Mast...
    Предварительный обзор Cooler Master MastЕсли вы следите за рынком компьютерного железа, то точно заметили популярность стеклянных вставок в корпу...
    Обзор Crush Them All. Неплохой кликер...
    Обзор Crush Them All. Неплохой кликерМы постоянно говорим про то, что разработчики мобильных игр делают исключительно простенькие проекты, где...
    Обзор Run Around. Что-то необычное...
    Обзор Run Around. Что-то необычноеВ большинстве случаев казуальные игры выглядят достаточно скучно и однообразно, так как разработчики прос...
    Предварительный обзор LG Q8 (2018). Недо...
    Предварительный обзор LG Q8 (2018). НедоВ последнее время можно заметить большую популярность смартфонов среднего класса от популярных производит...
    Предварительный обзор Samsung Galaxy Not...
    Предварительный обзор Samsung Galaxy NotДо анонса было понятно, что корейская компания Samsung не планирует революцию на мобильном рынке, скорее ...
    Предварительный обзор HyperX Pulsefire F...
    Предварительный обзор HyperX Pulsefire FКомпания HyperX весьма успешно зашла на рынок игровой периферии — все мы помним легендарные Cloud II, кот...
    Обзор PUSS!. Котики и всё такое...
    Обзор PUSS!. Котики и всё такоеПрактически всегда инди-разработчики выпускают какие-то скучные проекты, которые не стоят внимания пользо...
    Предварительный обзор ASUS Designo MZ27A...
    Предварительный обзор ASUS Designo MZ27AСтоит отметить, что далеко не всем пользователям нужны крутые мониторы с невероятной графикой. Большинств...
    Обзор mapstr. Отмечаем любимые бары...
    Обзор mapstr. Отмечаем любимые барыВажно всегда иметь при себе карты на смартфоне, так как жизнь штука интересная и иногда забрасывает в так...
    
    МегаОбзорМегаОбзор
    ЭЛ № ФС 77 - 68301. Выдано РоскомнадзоромМегаОбзор
    MegaObzor в социальных сетях:
    Яндекс.Метрика
    2006-2018 © MegaObzor