Свойство position

Свойство position элементдердин позициялоо ыкмасын белгилейт. Бул касиет көбүнчө жогорудан, оңдон, төмөндөн, солдон тиешелүү четтөөлөрдү белгилөөчү top, right, bottom, left касиеттери менен бирге колдонулат.

Синтаксис

cssселектор {
  position: absolute | relative | fixed | static | sticky;
}

Position үчүн маанилер

Демейки маани: static.

Мисал . Абсолюттук позициялоо

Элементти экрандын жогорку сол бурчуна кичинекей четтөөлөр менен жайгаштыралы:

html<div class="elem"></div>

<div class="main">
  some long text
</div>

css.elem {
  position: absolute;
  top: 40px;
  left: 50px;
  width: 100px;
  height: 100px;
  background-color: #98fb98;
}

.main {
  width: 400px;
  text-align: justify;
  margin: 20px auto;
}

Результат:

Мисал . Абсолюттук позициялоо

Эми элементти экрандын жогорку оң бурчуна кичинекей четтөөлөр менен жайгаштыралы:

html<div class="elem"></div>

<div class="main">
  some long text
</div>

css.elem {
  position: absolute;
  top: 40px;
  right: 50px;
  width: 100px;
  height: 100px;
  background-color: #98fb98;
}

.main {
  width: 400px;
  text-align: justify;
  margin: 20px auto;
}

Результат:

Мисал . Бекемделген позициялоо

Бекемделген позициялоодо элемент скролдогондо ордунда калат:

html<div class="elem"></div>

<div class="main">
  some long text
</div>

css.elem {
  position: fixed;
  top: 40px;
  left: 50px;
  width: 100px;
  height: 100px;
  background-color: #98fb98;
}

.main {
  width: 400px;
  text-align: justify;
  margin: 20px auto;
}

Результат:

Мисал . Салыштырмалуу позициялоо

Салыштырмалуу позициялоодо элемент өзүнүн кадимки ордуна карата жылып кетет, бирок башка элементтер элемент жылбаган сыяктуу аракеттенишет:

html<div class="container">
  <div class="elem elem1"></div>
  <div class="elem elem2"></div>
  <div class="elem elem3"></div>
</div>

css.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 маанисине ээ болсо, анда абсолюттук позицияланган элементтер ата-энесине карата позицияланышат:

html<div class="container">
  <div class="elem"></div>
</div>

css.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 маанисине ээ болсо, анда абсолюттук позицияланган элементтер ата-энесине карата позицияланышат:

html<div class="container">
  <div class="elem"></div>
</div>

css.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 сыяктуу аракеттенет, берилген позицияга жеткенге чейин скролдогуда, андан кийин ал жерге жабышат. Келгиле, жабышча баш кийимди жасайлы:

html<h1>Негизги Сайттын Баш Кийими</h1>

<div class="header">header header header</div>

<div class="main">
  some long text
</div>

cssh1 {
  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;
}

Результат:

Мисал . Позициясыз

Эгер элементке позициясыз абсолюттук позициялоо берилсе, анда элемент позицияланбаган учурдагы ордунда калат, бирок башка элементтер аны байкоостой калышат:

html<div class="container">
  <div class="elem elem1"></div>
  <div class="elem elem2"></div>
  <div class="elem elem3"></div>
</div>

css.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 касиетин белгилесек, анда тик багытта элемент керектүү орунга турат, ал эми горизонталдык багытта турган жерінде калат:

html<div class="container">
  <div class="elem elem1"></div>
  <div class="elem elem2"></div>
  <div class="elem elem3"></div>
</div>

css.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;
}

Результат:

Мисал . Бардык позициялар

Абсолюттук позициялоодо бардык жактардан позицияларды белгилөөгө болот, туурасын жана бийиктигин белгилөөсүз. Бул учурда элемент ата-энесинин блогунун борборуна турат:

html<div class="container">
  <div class="elem"></div>
</div>

css.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;
}

Результат:

Ошондой эле караңыз