CSS-POSITION
position
position – определяет метод позиционирования элементов относительно окна браузера или других элементов на веб-странице.
Краткая информация:
| Նախասահմանված արժեքը | static |
| Ժառանգվում են | Нет |
| Կիրառվում են | Со всеми элементами |
| Ենթարկվում է անիմացիայի | Нет |
Значения следующие:
absolute – позиционирует элемент за пределами веб-страницы, как будто он даже не был указан в коде. Остальные элементы веб-страницы не замечают его существования. Местоположение данного элемента определяется է left, top, right և bottom через свойства.
Местоположение элемента можно определить двумя способами:
1. Если родительский элемент элемента определен как " position: static ", или если у элемента нет родителя, то его местоположение, координаты местоположения, будут определяться от верхнего левого края окна браузера.
Пример в исходном виде:
Первая версия абсолюта:
.parent {
position: static;
margin-left: 25%;
background: grey;
width: 700px;
height: 500px;
border: 3px solid black;
}
.layer1 {
background: #C70039;
position: relative;
left: 100px;
width: 480px;
font-size: 30px;
}
.layer2 {
background: orange;
position: absolute;
top: 0;
left: 0;
font-size: 30px;
}
.layer3 {
background: #900C3F;
position: relative;
left: 100px;
width: 480px;
font-size: 30px;
}
.layer4 {
background: #581845;
position: relative;
left: 100px;
width: 480px;
font-size: 30px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>hayti</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="parent">
<div class="layer2">Lorem ipsum dolor сидит amet. Различный...</div>
<div class="layer3">Lorem ipsum dolor сидит amet. Различный...</div>
<div class="layer4">Lorem ipsum dolor сидит amet. Различный...</div>
<div class="layer5">Lorem ipsum dolor сидит amet. Различный...</div>
</div>
</body>
</html>
Второй элемент сместился со своего первоначального места и обосновался բրաուզերի պատուհանի վերևի ձախ եզրում. Его исходное местоположение не сохранилось, а было заполнено другим, поскольку элемент покинул данную веб-страницу, как будто его и не было. Элемент стал независимым от остальных.
2. Если родительский элемент элемента определен как " position: relative, то его местоположение, координаты местоположения, будут определяться от верхнего левого края родительского элемента.
Второй вариант:
.parent {
position: relative;
margin-left: 25%;
background: grey;
width: 700px;
height: 500px;
border: 3px solid black;
}
.layer2 {
background: orange;
position: absolute;
top: 0;
left: 0;
font-size: 30px;
}
.
.
.
Второй элемент сместился со своего первоначального места и обосновался ծնողի վերևի ձախ եզրում.
fixed - работает как абсолютный, но привязывается к местоположению окна браузера, указанному свойствами left, top, right и low. При перемещении веб-страницы элемент не перемещается вместе с остальными элементами.
.parent {
position: relative;
margin-left: 25%;
background: grey;
width: 700px;
height: 500px;
border: 3px solid black;
}
.layer2 {
background: orange;
position: fixed;
top: 0;
left: 0;
font-size: 30px;
}
.
.
.
relative – положение элемента устанавливается из исходного положения и изменяется left, top, right, bottom через свойства. Элемент остается в потоке веб-страницы, не становится независимым от других элементов, а при перемещении место не заполняется другим элементом.
.parent {
position: relative;
margin-left: 25%;
background: grey;
width: 700px;
height: 500px;
border: 3px solid black;
}
.layer2 {
background: orange;
position: relative;
width: 480px;
top: -43px;
left: -50px;
font-size: 30px;
}
.
.
.
static – элементы отображаются как обычно и left, top, right, bottom использование свойств не будет иметь никакого эффекта.
sticky - эта особенность relativeи fixedпредставляет собой комбинацию Элемент является относительным до тех пор, пока исходное положение элемента не будет пересечено при прокрутке веб-страницы вниз, и тогда элемент считается фиксированным.
.parent {
position: relative;
margin-left: 25%;
background: grey;
width: 700px;
height: 500px;
border: 3px solid black;
}
.layer2 {
background: orange;
position: sticky;
width: 480px;
top: 0;
left: 0;
font-size: 30px;
}
.
.
.
top right bottom left
работают position со свойством и определить расположение элементов на веб-странице.
Например: topопределяет пространство от верхнего края родительского элемента (который также может быть окном браузера) до верхнего края дочернего элемента и не учитывает какие-либо используемые внешние или внутренние границы (они являются отдельными и не включены) topдо размера, указанного в ).
Остальные следуют той же логике.
Краткая информация:
| Նախասահմանված արժեքը | auto |
| Ժառանգվում են | Нет |
| Կիրառվում են | Со всеми элементами |
| Ենթարկվում է անիմացիայի | Да |
div {
background: orange;
position: absolute;
top: 150px;
margin-top: 50px;
width: 200px;
height: 200px;
}
Расчет позиционирования элемента зависит position от объекта недвижимости.
Если последнее absolute будет окно браузера в качестве родителя, а положение элемента будет определяться соответствующими краями окна браузера.
Если: positionравно relative, расположение элемента будет определено, начиная с его исходного положения.
Если родитель positionравно relativeи дочь absolute(или relative), расположение элемента будет определяться соответствующими краями родительского элемента.
left
right
top
bottom
Значения следующие:
auto - положение элемента не меняется.
%-в случае
1. top и: bottomВ случае , процент будет рассчитываться в зависимости от роста родителя.
2. left и: right, процент будет рассчитываться в зависимости от ширины родительского элемента.
z-index
z-index – все элементы веб-страницы можно размещать друг над другом.
Если необходимо разместить их в заданном порядке, то будет использоваться 3-е измерение Z (x-горизонтально, y-вертикально, z-перпендикулярно экрану, т.е. близко или далеко).
Действительно для элементов, которые position -ը равно, absolute, fixed или relative:
Краткая информация:
| Նախասահմանված արժեքը | auto |
| Ժառանգվում են | Нет |
| Կիրառվում են | Элементы, имеющие position параметр. |
| Ենթարկվում է անիմացիայի | Да |
Значения следующие:
В качестве значения указывается целое число (положительное, отрицательное, ноль).
Чем выше число, тем выше элемент будет по сравнению с другими элементами.
Если: z-indexимеет одинаковое число — одинаковый вес — во всех элементах, то приоритет будет отдан последнему элементу html-кода и он будет отображаться на переднем плане.
auto - порядок элементов делается автоматически с учетом их положения в html-коде или того, какому родителю они принадлежат, ведь дочерние элементы имеют тот же номер, что и их родительский.
.parent {
width: 600px;
height: 300px;
background: grey;
border: 3px solid black;
position: relative;
}
.div01 {
width: 200px;
height: 200px;
background: #FFC300;
position: absolute;
top: 80px;
left: 80px;
z-index: 5;
}
.div02 {
width: 200px;
height: 200px;
background: #FF5733;
position: absolute;
top: 60px;
left: 60px;
z-index: 4;
}
.div03 {
width: 200px;
height: 200px;
background: #C70039;
position: absolute;
z-index: 3;
top: 40px;
left: 40px;
}
.div04 {
width: 200px;
height: 200px;
background: #900C3F;
position: absolute;
top: 20px;
left: 20px;
z-index: 2;
}
.div05 {
width: 200px;
height: 200px;
background: #581845;
position: absolute;
z-index: 1;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>hayti</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="parent">
<div class="div01"></div>
<div class="div02"></div>
<div class="div03"></div>
<div class="div04"></div>
<div class="div05"></div>
</div>
</body>
</html>
Russian 
Armenian