Свойство position
Свойство position задава метода на позициониране
на елементи. Това свойство най-често
се използва заедно със свойствата
top,
right,
bottom,
left,
които задават отстъпи
отгоре, отдясно, отдолу, отляво съответно.
Синтаксис
селектор {
position: absolute | relative | fixed | static | sticky;
}
Стойности за position
| Стойност | Описание |
|---|---|
absolute |
Абсолютно позициониране. Елементът се премахва от нормалния поток на документа и се позиционира спрямо най-близкия позициониран родител (ако има) или спрямо прозореца на браузъра. |
relative |
Относително позициониране. Елементът се измества спрямо нормалната си позиция в потока на документа, но пространството, което е заемал, остава запазено. |
fixed |
Фиксирано позициониране. Елементът се премахва от нормалния поток на документа и се позиционира спрямо прозореца на браузъра. Остава на място при превъртане на страницата. |
static |
Статично позициониране. Стойността означава липса на позициониране и елементът се държи както обикновено. |
sticky |
Лепкаво позициониране.
Елементът се държи като relative, докато не достигне зададената
позиция при превъртане, след което се залепва към указаното място
(като fixed).
|
Стойност по подразбиране: static.
Пример . Абсолютно позициониране
Разположим елемент в горния ляв ъгъл на екрана с малки отстъпи:
<div class="elem"></div>
<div class="main">
some long text
</div>
.elem {
position: absolute;
top: 40px;
left: 50px;
width: 100px;
height: 100px;
background-color: #98fb98;
}
.main {
width: 400px;
text-align: justify;
margin: 20px auto;
}
:
Пример . Абсолютно позициониране
А сега разположим елемент в горния десен ъгъл на екрана с малки отстъпи:
<div class="elem"></div>
<div class="main">
some long text
</div>
.elem {
position: absolute;
top: 40px;
right: 50px;
width: 100px;
height: 100px;
background-color: #98fb98;
}
.main {
width: 400px;
text-align: justify;
margin: 20px auto;
}
:
Пример . Фиксирано позициониране
При фиксирано позициониране елементът ще остава на място при превъртане:
<div class="elem"></div>
<div class="main">
some long text
</div>
.elem {
position: fixed;
top: 40px;
left: 50px;
width: 100px;
height: 100px;
background-color: #98fb98;
}
.main {
width: 400px;
text-align: justify;
margin: 20px auto;
}
:
Пример . Относително позициониране
При относително позициониране елементът се измества спрямо нормалната си позиция, но останалите елементи се държат така, сякаш елементът не е изместен:
<div class="container">
<div class="elem elem1"></div>
<div class="elem elem2"></div>
<div class="elem elem3"></div>
</div>
.container {
display: flex;
justify-content: flex-row;
}
.elem {
margin: 0 3px;
width: 100px;
height: 100px;
background-color: #add8e6;
}
.elem2 {
position: relative;
top: 20px;
left: 30px;
background-color: #e6addf;
}
:
Пример . Влагане
Ако родителят има свойство position
със стойност relative,
то абсолютно позиционираните елементи
ще се позиционират спрямо
родителя:
<div class="container">
<div class="elem"></div>
</div>
.container {
position: relative;
border: 1px solid red;
width: 500px;
height: 300px;
}
.elem {
position: absolute;
top: 0px;
right: 0px;
width: 100px;
height: 100px;
background-color: #add8e6;
}
:
Пример . Влагане
Ако родителят има свойство position
със стойност absolute,
то абсолютно позиционираните елементи
ще се позиционират спрямо
родителя:
<div class="container">
<div class="elem"></div>
</div>
.container {
position: absolute;
top: 30px;
left: 30px;
border: 1px solid red;
width: 500px;
height: 300px;
}
.elem {
position: absolute;
top: 0px;
right: 0px;
width: 100px;
height: 100px;
background-color: #add8e6;
}
:
Пример . Лепкаво позициониране
Ако за елемент свойството position
има стойност sticky, то елементът се държи
като relative, докато не достигне зададената
позиция при превъртане, след което се залепва за мястото.
Нека направим лепкаво заглавне:
<h1>Main Site Header</h1>
<div class="header">header header header</div>
<div class="main">
some long text
</div>
h1 {
text-align: center;
}
.header {
position: sticky;
top: 0;
padding: 20px;
background: #f0f0f0;
text-align: center;
font-weight: bold;
}
.main {
width: 400px;
margin: 20px auto;
border: 1px solid #ccc;
padding: 20px;
text-align: justify;
}
:
Пример . Без позиция
Ако на елемент се зададе абсолютно позициониране без указание на позиция, то елементът ще остане да стои на мястото, където е стоял без позициониране, но останалите елементи ще престанат да го забелязват:
<div class="container">
<div class="elem elem1"></div>
<div class="elem elem2"></div>
<div class="elem elem3"></div>
</div>
.container {
position: relative;
border: 1px solid red;
width: 500px;
height: 300px;
}
.elem {
display: inline-block;
}
.elem2 {
position: absolute;
width: 50px;
height: 50px;
background-color: #e6addf;
}
.elem1, .elem3 {
width: 100px;
height: 100px;
background-color: #add8e6;
}
:
Пример . Една ос
При абсолютно позициониране може да се зададе позиция
само по една ос.
Например, ако зададем свойство top,
то по вертикала елементът ще заеме желаната
позиция, а по хоризонтала ще остане да стои,
там, където е стоял:
<div class="container">
<div class="elem elem1"></div>
<div class="elem elem2"></div>
<div class="elem elem3"></div>
</div>
.container {
position: relative;
border: 1px solid red;
width: 500px;
height: 300px;
}
.elem {
display: inline-block;
}
.elem2 {
position: absolute;
top: 20px;
width: 50px;
height: 50px;
background-color: #e6addf;
}
.elem1, .elem3 {
width: 100px;
height: 100px;
background-color: #add8e6;
}
:
Пример . Всички позиции
При абсолютно позициониране може да се зададат позиции от всички страни, без да се задава ширина и височина. В този случай елементът ще се позиционира в центъра на родителския блок:
<div class="container">
<div class="elem"></div>
</div>
.container {
position: relative;
border: 1px solid red;
width: 500px;
height: 300px;
}
.elem {
position: absolute;
top: 20px;
bottom: 20px;
left: 20px;
right: 20px;
background-color: #add8e6;
}
:
Вижте също
-
свойство
z-index,
което задава наслагване на елементи
