CSS :: Позиционирование элементов
css-свойства position, left, right, top, bottom
Все браузеры в ходе разбора html-кода и формирования веб-страницы располагают элементы по установленному стандарту, согласно которому блочные элементы располагаются вертикально друг под другом, т.к. по умолчанию они стремятся занять всю доступную в данной ситуации ширину, а строчные элементы наоборот, располагаются горизонтально друг за другом до тех пор, пока не будет занята вся доступная в данной ситуации ширина, после чего браузер делает перенос строки и продолжает располагать строчные элементы друг за другом на новой строке. Однако такой способ расположения элементов на странице далеко не всегда удобен, поэтому в CSS присутствует специальное ненаследуемое свойство position, которое позволяет определять порядок расположения элементов относительно окна браузера, других элементов на веб-странице или относительно текущего местоположения элемента. Данное свойство используется в комбинации со свойствами left, right, top и bottom, которые определяют относительное смещение позиционированного элемента (см. пример №1). В качестве значений эти свойства принимают любые доступные в CSS единицы измерения, включая отрицательные значения. Разрешается использовать проценты, которые у свойств left и right рассчитываются относительно ширины родительского элемента, а у top и bottom относительно высоты родительского элемента. Если указать в качестве значения свойств ключевое слово auto, положение позиционированного элемента не изменится.
Теперь перечислим значения свойства position:
- static – элемент будет отображаться в том месте, в котором он обычно располагается, находясь в общем потоке документа; применение к элементу свойств left, right, top и bottom не даст никакого эффекта;
- absolute – элемент будет удален из общего потока документа, а другие элементы займут его место, как будто абсолютно позиционированный элемент вообще отсутствует; применение к элементу свойств left, right, top и bottom приведет к его смещению на указанную величину относительно соответствующей стороны области содержимого позиционированного родительского элемента (значение свойства у него не должно быть static) или, в случае отсутствия такового, относительно соответствующей стороны области содержимого первого позиционированного элемента-предка; если же для данного элемента не найдется и позиционированного элемента-предка, то смещение будет происходить относительно соответствующей стороны области содержимого окна браузера (фрейма);
- fixed – элемент будет удален из общего потока документа, а другие элементы займут его место, как будто фиксированно позиционированный элемент вообще отсутствует; применение к элементу свойств left, right, top и bottom приведет к его смещению на указанную величину относительно соответствующей стороны области содержимого окна браузера (фрейма), соответственно, при прокрутке содержимого страницы в окне браузера фиксированный элемент будет оставаться на одном и том же месте;
- relative – элемент останется в общем потоке документа, а применение к элементу свойств left, right, top и bottom приведет к его смещению относительно текущего положения соответствующей стороны области содержимого элемента; при этом его место не будет занято другими элементами из потока, т.к. для них относительно позиционированный элемент как будто остается на прежнем месте (в потоке документа).
htmlCodes
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Позиционирование элементов</title>
<style>
div{
position: relative;
width: 500px;
height: 300px;
margin-top: 5em;
padding: 10px;
border: solid 5px blue;
}
p{
top: -2em;
left: 70px;
width: 400px;
height: 70px;
margin: 10px;
padding: 1em;
border: solid 5px green;
background-color: yellow;
}
.pos_1{
position: fixed;
}
.pos_2{
position: static;
}
.pos_3{
position: relative;
}
.pos_4{
position: absolute;
}
</style>
</head>
<body>
<div>
<p style="background-color: violet"></p>
<p class="pos_1">
<br>
position: fixed;<br>
top: -2em;<br>
left: 70px;
</p>
</div>
<div>
<p style="background-color: violet"></p>
<p class="pos_2">
position: static;<br>
top: -2em;<br>
left: 70px;
</p>
</div>
<div>
<p style="background-color: violet"></p>
<p class="pos_3">
position: relative;<br>
top: -2em;<br>
left: 70px;
</p>
</div>
<div>
<p style="background-color: violet"></p>
<p class="pos_4">
position: absolute;<br>
top: -2em;<br>
left: 70px;
</p>
</div>
</body>
</html>
Пример №1. Использование различных вариантов позиционирования элементов
Наберите код примера в редакторе и попробуйте посмотреть, как изменится положение абзацев, если убрать позиционирование. Затем еще раз перечитайте материал, по ходу чтения пробуя применять к ним указанные варианты позиционирования.
css-свойство z-index
Введение позиционирования значительно облегчило жизнь веб-разработчикам, позволив размещать элементы практически в любом месте веб-документа по своему усмотрению. Однако при использовании позиционирования зачастую происходит наложение элементов друг на друга, что привело к идее введения дополнительного ненаследуемого свойства z-index для регулирования положения позиционированных элементов не только в горизонтальной плоскости вдоль осей х и у, но и по вертикали вдоль оси z, имитируя тем самым третье измерение, перпендикулярное экрану (см. пример №2).
htmlCodes
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>z-index</title>
<style>
p{
padding: 1em;
border: solid 5px red;
width: 400px;
height: 200px;
}
.pos_1{
position: absolute;
z-index: 2;
top: 20px;
left: 20px;
background-color: yellow;
}
.pos_2{
position: absolute;
z-index: 3;
top: 90px;
left: 150px;
background-color: violet;
}
</style>
</head>
<body>
<p class="pos_1">
Позиционирован абсолютно. z-index равен 2.
</p>
<p class="pos_2">
Позиционирован абсолютно. z-index равен 3,
поэтому данный абзац находится выше, т.е.
ближе к нам по оси z.
</p>
</body>
</html>
Пример №2. Использование свойства z-index
В качестве значений свойство принимает целые числа (включая отрицательные). Чем больше значение z-индекса элемента, тем выше он находится по сравнению с элементами, у которых он меньше. Если же элементы имеют одинаковый z-индекс, то на переднем плане будет отображаться элемент, который в html-коде встречается ниже. В качестве значения разрешается также использовать ключевое слово auto, которое присваивает элементу z-индекс родителя.
css-свойство clip
Для абсолютно и фиксированно позиционированных элементов имеется еще одно ненаследуемое свойство clip, определяющее прямоугольную область элемента, в которой содержимое будет видимым. Вся остальная часть обрезается и на странице не показывается (см. пример №3).
htmlCodes
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Свойство clip</title>
<style>
p{
padding: 5px;
border: solid 8px red;
width: 400px;
height: 150px;
left: 20px;
overflow: scroll;
clip: rect(6px, 385px, 135px, 6px);
}
.pos_1{
position: absolute;
top: 20px;
background-color: yellow;
}
.pos_2{
position: fixed;
top: 190px;
background-color: violet;
}
</style>
</head>
<body>
<p class="pos_1">
Позиционирован, как absolute. Отсекаем полосы прокрутки
и делаем тоньше границы.
</p>
<p class="pos_2">
Позиционирован, как fixed. Отсекаем полосы прокрутки
и делаем тоньше границы.
</p>
</body>
</html>
Пример №3. Использование свойства clip
В качестве значений свойство clip принимает:
- rect(y1,x1,y2,x2) – задает параметры прямоугольной области, в которой содержимое элемента будет видно на странице; через запятую указываются расстояния от края элемента до верхнего, правого, нижнего и левого края оставляемой области (см. рисунок №4); при этом расстояния y1 и y2 отсчитываются от верхнего края элемента, соответственно, до верхего и нижнего края оставляемой (видимой) области, а расстояния x1 и x2 отсчитываются от левого края элемента, соответственно, до правого и левого края оставляемой (видимой) области, так что при указании значений следует быть внимательным и следить за тем, чтобы во избежание полной обрезки элемента выполнялись условия y1<y2 и x1>x2; если с какой-то стороны обрезать элемент не требуется, то разрешается использовать ключевое слово auto; для указания размеров разрешается использовать все доступные в CSS единицы измерения;
- auto – элемент обрезаться не будет; соответствует rect(auto,auto,auto,auto).
Рис. №4. Схема отсчета некоторых значений свойства clip
Быстрый переход к другим страницам
- Свойство display
- Позиционирование элементов
- Трансформация в CSS
- Вернуться к оглавлению учебника