Расположение div на странице. Две колонки с фиксированной высотой. Демонстрация и исходный код

Свойство position имеет следующие значения
static relative absolute fixed
Только совместно с ним применяются свойства (искл. position: static;)
top bottom right left
Одновременно могут присутствовать
margin transform float (искл. position: absolute; и position: fixed;)

.primer { border: 4px solid #456; width: 200px; background: #fff; position: fixed; position: static; position: relative; position: absolute; margin: 15px -15px -15px 15px; -moz-transform: translate(15px, 15px); -webkit-transform: translate(15px, 15px); -o-transform: translate(15px, 15px); -ms-transform: translate(15px, 15px); z-index: 100; float: left; top: 15px; bottom: 15px; right: 15px; left: 15px; } .primer1 { border: 4px solid #087e11; width: 200px; background: #e1e1e1; z-index: 200; position: relative; }

Добавить пустой тег перед div с class="primer" - .

Введение

Элементы на веб-странице занимают определённое пространство. По аналогии с корабликами в игре "Морской бой". Между кораблями должны быть пустые клеточки - margin.

Для того, чтобы один элемент поместить поверх другого, нужно задать отрицательное значение для margin. Но тогда содержимое тегов будет накладываться друг на друга. С помощью свойств position и они как бы приподнимаются на уровень 2.

В естественном порядке нижние теги в коде показаны над верхними. Благодаря z-index на уровне 2 можно самим определить видимый элемент.

Статического позиционирование - position: static;

position: static используется по умолчанию и отменяет действие relative, absolute и fixed. Значения свойств top, bottom, right, left игнорируются. При отсутствии transform не учитывается и z-index.

z-index: 3; } .svetlyi2 { background-color: #fff; width: 250px; z-index: 2; margin: 0px -30px -30px 30px; } .svetlyi3 { background-color: #f5f5dc; width: 250px; z-index: 1; } А Б В

Относительное позиционирование - position: relative;

Тому блоку, которому мы присвоим position: relative будет отдан приоритет. Содержимое нижнего элемента скрывается.

margin: 0px -60px -30px 60px; position: relative; А Б В

Для того, чтобы расположить блок Б поверх В, но ниже А, недостаточно присвоить и ему position: relative, поскольку в коде он стоит ниже блока А, а значит будет его перекрывать.

.temnyi { background-color: #666; width:500px; text-align: center; font-size: 250%;} .svetlyi1 { background-color: #ccc; width: 250px; margin: 0px -60px -30px 60px; position: relative; } .svetlyi2 { background-color: #fff; width: 250px; margin: 0px -30px -30px 30px; position: relative; } .svetlyi3 { background-color: #f5f5dc; width: 250px; } А Б В

Нужно задать для элемента Б ещё и z-index меньше, чем у блока А.

.temnyi { background-color: #666; width:500px; text-align: center; font-size: 250%;} .svetlyi1 { background-color: #ccc; width: 250px; margin: 0px -60px -30px 60px; } .svetlyi2 { background-color: #fff; width: 250px; margin: 0px -30px -30px 30px; } .svetlyi3 { background-color: #f5f5dc; width: 250px; } А Б В

Вместо margin при относительном позиционировании иногда лучше использовать свойства top, bottom, right, left. Точкой отсчёта для них является исходное положение элемента. При этом блок Б продолжает располагаться так, словно блок А находится на прежнем месте - он оставляет для него пустое пространство. Поэтому можно не колдовать с пустым div ().

.temnyi { background-color: #666; width:500px; text-align: center; font-size: 250%;} .svetlyi1 { background-color: #ccc; width: 250px; top: 30px; left: 60px; position: relative; z-index: 2; } .svetlyi2 { background-color: #fff; width: 250px; margin: 0px -30px -30px 30px; position: relative; z-index: 1; } .svetlyi3 { background-color: #f5f5dc; width: 250px; } А Б В

Полная аналогия со свойством

.temnyi { background-color: #666; width:500px; text-align: center; font-size: 250%;} .svetlyi1 { background-color: #ccc; width: 250px; transform: translate(60px, 30px); z-index: 2; } .svetlyi2 { background-color: #fff; width: 250px; margin: 0px -30px -30px 30px; position: relative; z-index: 1; } .svetlyi3 { background-color: #f5f5dc; width: 250px; } А Б В

Для встроенных элементов

Встроенные элементы margin не смещает вниз и вверх (). Только top, bottom

top: 30px; position: relative; БАБ или
.temnyi { background-color: #666; width:500px; font-size: 250%;} .svetlyi1 { background-color: #ccc; width: 250px; transform: translate(0px, 30px); } .svetlyi2 { background-color: #fff; width: 250px; } БАБ

Б А Б

Абсолютное и фиксированное позиционирование

Казалось бы, что блок с position: absolute должен находиться выше position: relative, но это нет так, тут действует естественный порядок. А значит z-index позволит между ними выбрать приоритетный элемент.

.temnyi { background-color: #666; width:500px; text-align: center; font-size: 250%;} .svetlyi1 { background-color: #ccc; width: 250px; margin: 0px -60px -30px 60px; position: relative; } .svetlyi2 { background-color: #fff; width: 250px; margin: 0px -30px -30px 30px; position: absolute; } .svetlyi3 { background-color: #f5f5dc; width: 250px; } А Б В

Блок В игнорирует исходное положение блока Б, поскольку при position: absolute и position: fixed элемент перестаёт влиять на соседние теги ни посредством своей ширины/высоты, ни посредством float: left.

.temnyi { background-color: #666; width:500px; text-align: center; font-size: 250%;} .svetlyi1 { background-color: #ccc; width: 250px; margin: 0px -60px -30px 60px; position: relative; z-index: 2; } .svetlyi2 { background-color: #fff; width: 250px; margin: 0px -30px -30px 30px; position: absolute; z-index: 1; } .svetlyi3 { background-color: #f5f5dc; width: 250px; margin-top: 20px; } А Б В

Итоговая таблица

отличительные свойства	position: static;	position: relative; transform: translate();	position: absolute;	position: fixed;
наложение	элементы лучше не помещать друг на друга	элементы имеет приоритет видимости над static. Другие значения равнозначны. Видимым будет тот, кто ниже находится в коде, либо обладает большим значением z-index
точка отсчёта top, right, bottom и left	игнорируются	исходное положение элемента	край родительского элемента	край окна браузера
элементы вокруг	учитывают текущее положение элемента	учитывают исходное положение элемента	игнорируют положение элемента
width: 100%; это ширина	элемента (для встроенного)/родительского элемента (для блочного)		родительского элемента с position не в значении static	окна браузера
при прокрутки страницы элемент	перемещается			"прилипает" к заданному месту окна браузера

А теперь для закрепления материала пощёлкайте по кнопкам в начале статьи, подумайте почему произошли именно такие изменения.

При относительном позиционировании блока надо задать свойство position:relative и свойства смещения. Смещение в этом случае будет происходить не относительно "родительского" элемента (как при абсолютном позиционировании), а относительно самого блока в нормальном потоке. Это будет понятнее на примере. Пусть у нас есть html-страница с тремя div-ами:

Относительное позиционирование

Давайте зададим в таблице стилей размеры и границы этих блоков:

#blok1, #blok2, #blok3 { border:1px solid red; width:150px; height:50px; }

Сейчас наша страница в браузере выглядит так:

Теперь давайте изменим положение второго блока, для этого добавим в страницу стилей правило:

#blok1, #blok2, #blok3 { border:1px solid red; width:150px; height:50px; } #blok2{ position:relative; left:50px; top:25px; }

Теперь наша страница выглядит так:

Наш второй блок сместился вниз и вправо относительно того места, где бы он находился в нормальном потоке. Остальные же блоки остались на своих местах. Практически относительное позиционирование применяется достаточно редко, поэтому мы не будем больше уделять этому внимание и рассмотрим плавающие блоки.

Плавающие блоки

Эти блоки нельзя позиционировать с точностью до пиксела, как в предыдущих схемах, но именно эта схема позиционирования очень распространенна. Без плавающих блоков обходится редкий сайт, а уж сделать "резиновую" верстку сайта без них и вовсе невозможно.

Такие блоки могут свободно перемещаться по странице, подобным образом ведут себя картинки в HTML, выровненные с помоьщью параметра align .

Плавающие блоки определяются свойством float , который определяет будет ли блок плавающим и в какую сторону он будет перемещаться. Возможны три варианта:

left - блок прижимается к левому краю, остальные элементы обтекают его с правой стороны.

right - блок прижимается к правому краю, остальные элементы обтекают его с левой стороны.

none - блок не перемещается и позиционируется согласно свойству position .

Давайте посмотрим на примере. Пусть у нас есть html-страница со следующим кодом:

Позиционирование блоков

Текст блока 1

И страница style.css со следующим кодом:

#blok1{ border:1px solid red; width:150px; height:50px; }

Сейчас наша страница в браузере выглядит так:

Давайте сделаем наш блок плавающим и прижмем его к левому краю:

#blok1{ border:1px solid red; width:150px; height:50px; float:left; }

Теперь давайте прижмем блок к правому краю:

#blok1{ border:1px solid red; width:150px; height:50px; float:right; }

Теперь наша страница в браузере выглядит так:

А что будет, если плавающих блоков на странице несколько? Давайте добавим в нашу html-страницу еще один блок:

Позиционирование блоков

Текст блока 1

Текст блока 2

Просто какие-то элементы на странице. Это может быть просто текст, ссылки, списки, картинки и т.д.

И зададим им разные значения свойства float :

#blok1{ border:1px solid red; width:150px; height:50px; float:left; } #blok2{ border:1px solid red; width:150px; height:50px; float:right; }

Теперь наша страница в браузере выглядит так:

А если у них будут одинаковые значения? Например:

#blok1{ border:1px solid red; width:150px; height:50px; float:left; } #blok2{ border:1px solid red; width:150px; height:50px; float:left; }

Тогда второй блок прижмется к правому краю первого блока:

Аналогична будет ситуация при одинаковых значениях right :

#blok1{ border:1px solid red; width:150px; height:50px; float:right; } #blok2{ border:1px solid red; width:150px; height:50px; float:right; }

Обратите внимание: сначала к правому краю прижмется блок 1, а уже к нему прижмется блок 2.

А что делать, если мы хотим, чтобы блоки были прижаты к правому краю, но располагались бы один под другим. Для этого существует свойство clear , которое определяет, какие стороны плавающего блока не могут соседствовать с другими плавающими блоками. У этог свойства может быть задано одно из четырех значений:

left - блок должен располагаться ниже всех левосторонних блоков.

right - блок должен располагаться ниже всех правосторонних блоков.

both - блок должен располагаться ниже всех плавающих блоков.

none - никаких ограничений нет, это значение по умолчанию.

Давайте в нашем последнем примере зададим это свойство для второго блока:

#blok1{ border:1px solid red; width:150px; height:50px; float:right; } #blok2{ border:1px solid red; width:150px; height:50px; float:right; clear:right; }

Теперь получилось так, как и хотелось: один блок под другим:

В предыдущем уроке, мы с вами с помощью абсолютного позиционирования делали вот такую страницу:

Давайте посмотрим, как ее можно сделать с помощью плавающих блоков. Итак, код самой страницы следующий:

Позиционирование блоков

шапка сайта

Контент

блок новостей

низ сайта

На странице style.css зададим сначала размеры и фон для наших блоков:

#header{ background:darkred; width:715px; height:100px; } #menu{ background:oldlace; width:190px; height:300px; } #content{ background:oldlace; width:525px; height:300px; } #footer{ background:darkred; width:715px; height:30px; } #news{ background:yellow; width:150px; height:280px; }

Сейчас наши блоки располагаются в нормальном потоке, т.е. один под другим. Нам надо сделать блоки menu и content плавающими и левосторонними. А блок news должен прижиматься к правому краю, т.е. его мы сделаем правосторонним плавающим блоком:

#header{ background:darkred; width:715px; height:100px; } #menu{ background:oldlace; width:190px; height:300px; float:left; } #content{ background:oldlace; width:525px; height:300px; float:left; } #footer{ background:darkred; width:715px; height:30px; } #news{ background:yellow; width:150px; height:280px; float:right; }

Наша страница в браузере выглядит так:

Посмотрим на наш блок новостей, видно, что он располагается ниже текста в блоке content . А ведь мы хотели, чтобы блок новостей был справа, а текст обтекал бы его слева.

Почему же у нас так не получилось? Потому что наш блок news в html-коде располагается ниже текста и его будет обтекать только тот текст, который расположен ниже его. Чтобы исправить это надо поместить наш div="news" выше текста (т.е. до слова "контент"):

Позиционирование блоков

шапка сайта

блок новостей

Контент

низ сайта

Вот теперь наш блок новостей находится на своем месте:

А чтобы он не прижимался вплотную к верхнему и правому краям, мы добавим для этого блока значение полей:

#news{ background:yellow; width:150px; height:280px; float:right; margin:10px; }

Теперь мы добились такого же резельтата, как и при абсолютном позиционировании.

Согласитесь, что с помощью плавающих блоков верстать страницу проще: не надо рассчитывать пикселы, да и код короче. К тому же при "резиновой" верстке мы и не можем указать точное расположение блока на экране, а с помощью плавающих блоков нам это и не нужно, достаточно указать лишь ориентир (слева, справа, ниже или в той же линии).

Фиксированные блоки

Как вы помните при фиксированном позиционировании блок фиксируется относительно области просмотра. В некотором смысле фиксированные блоки похожи на фреймы. Только внутри фрейма доступна прокрутка, а внутри блока нет.

У фиксированных блоков есть один существенный недостаток: они не поддерживаются браузерами Internet Explorer. А потому использовать их пока не следует. Поэтому здесь мы лишь укажем синтаксис такого правила, если хотите попробуйте сами (например, в браузере Opera).

#blok{ position:fixed; left:0px; top:0px; }

Блок с идентификатором "blok" будет при прокрутке страницы оставаться на месте.

На сегодня все. В следующем уроке мы познакомимся еще с некоторыми свойствами блоков и их видами.

Если разрезать любой сайт, созданный на основе html , то перед вами предстанет некая послойная структура. Причем своим внешним видом она будет схожа со слоеным пирогом. Если вам так кажется, то вероятнее всего вы давно не ели. Поэтому сначала утолите свой голод, а затем мы поведаем вам о том, как расположить слой div по центру вашего сайта:

Преимущества верстки с помощью тега

Существует два основных типа построения структуры сайта:

Табличная;
Блочная.

Табличная верстка была доминирующей еще на заре зарождения интернета. К ее преимуществам можно отнести точность заданного позиционирования. Но, тем не менее, она обладает явными недостатками. Главными из них является объемность кода и низкая скорость загрузки.

При использовании табличной верстки веб-страница не будет отображаться вплоть до полной загрузки. В то время как при использовании блоков div элементы отображаются сразу.

Кроме высокой скорости загрузки блочное построение сайта позволяет в несколько раз уменьшить объем кода html . В том числе и за счет использования классов CSS .

Тем не менее, табличную верстку следует использовать для структуризации отображения данных на странице. Классическим примером ее применения является отображение таблиц.

Блочное построение на основе тегов также называют послойным, а сами блоки слоями. Это связано с тем, что при использовании определенных значений свойств их можно размещать один поверх другого подобно слоям в Photoshop.

Средства позиционирования

В блочной верстке позиционирование слоев лучше осуществлять с помощью средств каскадных таблиц стилей. Основным свойством CSS, отвечающим за расположение , является float.
Синтаксис свойства:
float: left | right | none | inherit ,
Где:

left – выравнивание элемента по левому краю экрана. Обтекание остальными элементами происходит справа;
right – выравнивание справа, обтекание остальными элементами – слева;
none – обтекание не допускается;
inherit – наследование значения родительского элемента.

Рассмотрим облегченный пример позиционирования блоков div с помощью этого свойства:

#left { width: 200px; height: 100px; float: left; background: rgb(255,51,102); } #right { width: 200px; height: 100px; float: right; background: rgb(0,255,153); } Левый блок Правый блок

Теперь постараемся с помощью этого же свойства расположить третий div по центру страницы. Но, к сожалению, у float нет значения center . А при задании новому блоку значения выравнивания вправо или влево он сдвигается в указанную сторону. Поэтому остается лишь всем трем блокам задать float: left :

Но и это не является оптимальным вариантом. При уменьшении окна все слои выстраиваются в один ряд по вертикали, а при увеличении размеров – прилипают к левому краю окна. Поэтому нужен более совершенный способ выравнивание div по центру.

Центрирование слоев

В следующем примере мы будем использовать слой-контейнер, в котором разместим остальные элементы. Это решает проблему смещения блоков друг относительно друга при изменении размеров окна. Центрирование контейнера посредине осуществляется с помощью задания свойствам margin нулевого значения отступам от верхнего края и auto по бокам (margin: 0 auto ):

#container { width: 600px; margin: 0 auto; } #left { width: 200px; height: 100px; float: left; background: rgb(255,51,102); } #right { width: 200px; height: 100px; float: left; background: rgb(0,255,153); } #center { width: 200px; height: 100px; float: left; background: rgb(255,0,0); } Левый блок Центральный блок Правый блок

Этот же пример показывает, как можно отцентровать div по горизонтали. А если немного отредактировать приведенный выше код, то можно добиться вертикального выравнивания блоков. Для этого нужно лишь изменить длину слоя-контейнера (уменьшить его ). То есть после редактирования его css класс должен выглядеть вот так:

После изменения все блоки выстроятся строго в ряд посредине. И их положение не изменится при любых размерах окна браузера. Вот как выглядит такое центрирование div по центру по вертикали:

В следующем примере для центрирования слоев внутри контейнера мы использовали ряд новых свойств css :

#container { width: 450px; height:150px; margin:0 auto; background-color:#66CCFF; } #left { width: 100px; height: 100px; background: rgb(255,51,102); display: inline-block; vertical-align: middle; margin-left: 35px; } #right { width: 100px; height: 100px; background: rgb(0,255,153); display: inline-block; vertical-align: middle; margin-left: 35px; } #center { width: 100px; height: 100px; background: rgb(255,0,0); display: inline-block; vertical-align: middle; margin-left: 35px; }

Краткое описание свойств css и их значений, которые мы использовали в данном примере для центрирования div внутри div :

display: inline-block – выравнивает блочный элемент в строку и обеспечивает его обтекание другим элементом;
vertical-align: middle – выравнивает элемент посредине относительно родительского;
margin-left – устанавливает отступ слева.

Как из слоя сделать ссылку

Как ни странно звучит, но такое возможно. Иногда div блок как ссылка может понадобиться при верстке различных видов меню. Рассмотрим практический пример реализации слоя-ссылки:

#layer1{ width: 500px; height: 100px; background: rgb(51,255,204); border:groove; } a { display: block; text-align: center; height: 100%; color: rgb(255,0,51); } Ссылка на наш сайт

В данном примере с помощью строки display: block мы задали ссылке значение блочного элемента. А чтобы вся высота блока div стала ссылкой, установили height : 100%.

Скрытие и отображение блочных элементов

Блочные элементы предоставляют больше возможностей для расширения функционала интерфейса, чем устаревшая табличная верстка. Часто бывает, что дизайн сайта является уникальным и узнаваемым. Но за такой эксклюзив приходиться платить нехваткой свободного места.

Особенно это касается главной страницы, стоимость размещения рекламы на которой является самой высокой. Поэтому и появляется проблема, куда бы «впихнуть » еще один рекламный баннер. И тут уж выравниванием div по центру страницы никак не отделаешься!

Более рациональным решением является сделать какой-нибудь блок скрывающимся. Вот простой пример такой реализации:

#layer1{ display:block; width: 500px; height: 100px; background: rgb(51,255,204); border:groove; } function show() { if(layer1=="none") { layer1="block"; } else { layer1="none"; } document.getElementById("layer1").style.display=layer1; }

Это волшебная кнопка. Нажатие на нее скроет или отобразит скрывающийся блок.

В данном примере расположение div блоков никак не меняется. Здесь используется простейшая функция JavaScript , меняющая значение свойства css display после нажатия на кнопку (событие onclick ).

Как видите, данное свойство может принимать множество значений. Поэтому является очень полезным и может использоваться для позиционирования элементов. В одном из предыдущих примеров с помощью одного из его значений (inline-block ) мы реализовали выравнивание div внутри div по центру.

Для скрытия и показа слоя мы использовали два значения свойства display .

15.03.2017

Пока нет

Всем привет!
В сегодняшнем уроке я расскажу, как при помощи позиционирования блоков можно размещать элемент в любом месте экрана.
Что нам дает позиционирование блоков? С помощью позиционирования блоков веб-мастер сможет создать любой уникальный дизайн сайта, размещая блоки там, где ему хочется. Чтобы разместить блоки в любом месте экрана, достаточно указать координаты.

Координаты в CSS

Свойство « TOP » | « LEFT » | « RIGHT » | « BOTTOM »
К позиционированию блоков обязательно прописывают координаты, то есть, где будет размещен блок.

Схема системы координат:

Координаты указываются четырьмя правилами:

top - вверх;
left - лево;
right - право;
bottom - вниз.

Синтаксис:

Правило_Координата: значение_координата;

Значение:
Значение указывать в px или в %.

Top:100px; /* верхний край*/ left:100px; /* левый край*/

Достаточно только указывать координаты на два края (на top или bottom, на left или right).

Позиционирование в CSS

Свойство « POSITION »
Позиционирование прописывается в CSS через правило «position » с нужным значением.

Синтаксис:

Position: значение;

Значение:

absolute – абсолютное;
relative – относительное;
fixed – фиксированное.

Давайте пройдемся по каждому значению.

Значение « ABSOLUTE»
Абсолютное позиционирование дает возможность веб-мастеру разместить блоки на веб-странице в любом месте экрана. Достаточно в CSS прописать правило «position » со значением «absolute » и нужными координатами:

Position:absolute; /* абсолютное позиционирование*/

Блок в css .blok1 { position:absolute; /* абсолютное позиционирование*/ top:100px; /* от верхнего края*/ right:50px; /* от верхнего правого края*/ }

Результат:

Значение « RELATIVE »
Относительное позиционирование дает возможность веб-мастеру сместить блок на веб-странице, но первоначальное место блока не освобождается для другого элемента. В CSS пропишите правило «position » со значением «relative » и нужными координатами:

Position:relative; /* относительное позиционирование*/

Блок в css .blok1 { position:relative; /* относительное позиционирование*/ top:100px; left:100px; }

CSS stands for Cascading Style Sheets. CSS describes how HTML elements are to be displayed on screen, paper, or in other media. CSS saves a lot of work. It can control the layout of multiple web pages all at once. CSS can be added to HTML elements in 3 ways: Inline - by using the style attribute in HTML elements Internal - by using a element in the section External - by using an external CSS file The most common way to add CSS, is to keep the styles in separate CSS files. However, here we will use inline and internal styling, because this is easier to demonstrate, and easier for you to try it yourself.

Результат:

По умолчанию

Относительное позиционирование

Фиксированное позиционирование в CSS

Значение «FIXED»
Фиксированное позиционирование дает возможность веб-мастеру разместить блоки на веб-странице в любом месте экрана и при прокрутке веб-страницы блок будет всегда располагаться относительно окна браузера (всегда будет виден на экране). Достаточно в CSS прописать правило «position » со значением «fixed » и нужными координатами:

Position:fixed; /* фиксированное позиционирование*/

Блок в css .blok1 { position: fixed; /* фиксированное позиционирование*/ top:0px; left:100px; }

Если результат не виден и не понятен, добавьте текста столько, чтобы на экране веб-страницы появилась полоса прокрутки.

Вот и закончили урок! Осталось еще 2-3 урока и вы закончите осваивать основы CSS. Это значит, что вы сможете с легкостью создавать красивые сайты.
Не пропустите остальные уроки! Подписывайтесь на обновления!

Предыдущая запись
Следующая запись

Необычное расположение!

Решите, какой элемент отображать спереди! Элементы могут перекрываться! Позиционирование

CSS свойства позиционирования позволяют вам позиционировать элемент. Также они могут расположить элемент позади другого, и указать, что должно произойти, когда содержимое элемента слишком большое.

Элементы могут располагаться, используя свойства top (сверху), bottom (снизу), left (слева), и right (справа). Однако, эти свойства не будут работать, пока не установлено свойство position. Также они работают по-разному, в зависимости от метода позиционирования.

Существует четыре различных метода позиционирования.

Статическое Позиционирование

HTML элементы позиционируются статически по умолчанию. Статически позиционированный элемент всегда располагается в соответствии со стандартным потоком элементов на странице.

Статически расположенные элементы не подвергаются воздействию свойств top, bottom, left, и right.

Фиксированное Позиционирование

Элемент с фиксированным положением позиционирован относительно окна браузера.

Он не будет двигаться, даже если окно прокручивается:

Замечание: IE7 и IE8 поддерживают значение fixed только если указан тип документа!DOCTYPE.

Фиксированно расположенные элементы удаляются из нормального потока. Документ и другие элементы ведут себя так, будто фиксированно расположенный элемент не существует.

Зафиксированные элементы могут перекрывать другие элементы.

Относительное Позиционирование

Относительно позиционированный элемент располагается относительно по отношению к его обычной позиции.

Относительно позиционированные элементы часто используются в качестве контейнеров для абсолютно позиционированных элементов.

Абсолютное Позиционирование

Абсолютно позиционированный элемент располагается относительно первого родительского элемента, который позиционирован иначе, чем статически. Если такого элемента не найдено, за родительский элемент принимается :

Абсолютно позиционированные элементы удаляются из стандартного потока элементов. Документ и другие элементы ведут себя так, будто абсолютно позиционированный элемент не существует.

Абсолютно расположенные элементы могут перекрывать другие элементы.

Перекрытие Элементов

Когда элементы расположены вне стандартного потока, они могут перекрывать другие элементы.

Свойство z-index указывает вертикальный порядок элемента (какой элемент должен быть помещен спереди, или сзади других элементов).

Элемент может иметь положительный или отрицательный вертикальный порядок:

Элемент с большим вертикальным порядком всегда находится впереди элементы с меньшим вертикальным порядком.

Замечание: Если два позиционированных элементы перекрываются и не указан вертикальный порядок, элемент расположенный позже в HTML коде будет показан сверху.

Еще примеры

Установка формы элемента
Этот пример демонстрирует как задать форму элемента. Элемент обрезается по этой форме, а затем отображается.

Как показать переполненный элемент, используя прокрутку
Этот пример демонстрирует как установить свойство overflow, чтобы создать полосу прокрутки, когда содержимое элемента слишком большое, чтобы уместиться в указанной области.

Как заставить браузер автоматически управлять переполнением
Этот пример демонстрирует как заставить браузер автоматически управлять переполнением.

Изменение курсора
Этот пример демонстрирует как изменить курсор.

Все CSS Свойства Позиционирования

Число в столбце "CSS" указывает, в какой версии CSS определено свойство (CSS1 или CSS2).

Свойство Описание Значения CSS

Расположение div на странице. Две колонки с фиксированной высотой. Демонстрация и исходный код

Еще на эту тему:

Другие статьи: