Sypat position

Sypat position elementleriň pozisionirlenme usulyny kesgitleýär. Bu sypat esasan top, right, bottom, left sypatlary bilen bilelikde ulanylyp, ýokardan, sagdan, aşakdan we çepden gönükme berýär.

Gramer

cssselektor {
  position: absolute | relative | fixed | static | sticky;
}

Position üçin bahalar

Bellenen bahasy: static.

Mysal . Absolýut pozisionirlenme

Elementi ekranyň çep ýokar burçunda kiçi gönükmeler bilen ýerleşdireli:

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

Результат:

Mysal . Absolýut pozisionirlenme

Indi element ekranyň sag ýokar burçunda kiçi gönükmeler bilen ýerleşdirilsin:

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

Результат:

Mysal . Bellige alynan pozisionirlenme

Bellige alynan pozisionirlenmede element süýşürilende ýerinde galar:

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

Результат:

Mysal . Nisbi pozisionirlenme

Nisbi pozisionirlenmede element adaty ýerineşmegine görä çalşylýar, ýöne beýleki elementler element çalşylmadyk ýaly hereket edýär:

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

Результат:

Mysal . Iç içe geçme

Eger ata elementde position sypaty relative bahasyna eýe bolsa, onda absolýut pozisionirlenen elementler ata elemente görä pozisionirlener:

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

Результат:

Mysal . Iç içe geçme

Eger ata elementde position sypaty absolute bahasyna eýe bolsa, onda absolýut pozisionirlenen elementler ata elemente görä pozisionirlener:

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

Результат:

Mysal . Yapşak pozisionirlenme

Eger element üçin position sypaty sticky bahasyna eýe bolsa, element süýşürme wagty kesgitlenen pozisiýa ýetýänçä relative ýaly hereket edýär, soňra ýere yapşýar. Yapşak header düzeliň:

html<h1>Esasy Siteniň Headeri</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;
}

Результат:

Mysal . Pozisiýasyz

Eger elemente pozisiýa görkezmän absolýut pozisionirlenme berilse, onda element pozisionirlenmesiz duran ýerinde galar, ýöne beýleki elementler ony anyklamaz:

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

Результат:

Mysal . Bir ok

Absolýut pozisionirlenmede pozisiýa diňe bir ok boýunça berlip bilner. Meselem, top sypatyny kesgitlesek, element dikeý ok boýunça zerur ýere geýär, ýöne gorizontal ok boýunça duran ýerinde galar:

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

Результат:

Mysal . Ähli pozisiýalar

Absolýut pozisionirlenmede giňlik we beýiklik bermän, ähli tarapdan pozisiýa berlip bilner. Bu ýagdaýda element ata blogyň merkezinde durar:

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

Результат:

Şeýle-de gözüňüz aýlasyn