CSSda elementlarning nisbiy pozitsiyalashuvi

Nisbiy pozitsiyalash position xususiyati uchun relative qiymati orqali belgilanadi. Bunday pozitsiyalash elementlarga o'zining joriy holatidan berilgan miqdorga siljish imkonini beradi. Bunda sahifaning boshqa barcha elementlari element o'zining boshlang'ich joyida turgan deb hisoblaydi. Ya'ni, bunday turdagi pozitsiyalashda element normal oqimdan chiqib ketmaydi.

Joriy holatdan siljishlar top, right, bottom va left xususiyatlari orqali belgilanadi.

Misol

Boshlanish uchun keling, shunchaki pozitsiyalashsiz ikki blok yarataylik:

html<div id="elem1"></div>
<div id="elem2"></div>

css#elem1 {
  width: 100px;
  height: 100px;
  border: 1px solid green;
}
#elem2 {
  width: 200px;
  height: 200px;
  border: 1px solid red;
}

Результат:

Misol

Keling endi birinchi blokka relative qo'shaylik. Bu hozircha hech narsani o'zgartirmaydi, chunki biz blokning siljishini ko'rsatmadik:

html<div id="elem1"></div>
<div id="elem2"></div>

css#elem1 {
  position: relative;
  width: 100px;
  height: 100px;
  border: 1px solid green;
}
#elem2 {
  width: 200px;
  height: 200px;
  border: 1px solid red;
}

Результат:

Misol

Keling endi blokimizni top xususiyatini belgilab, yuqoridan 30px surib ko'ramiz. Bunda boshqa barcha elementlar bizning blok o'zining boshlang'ich joyida qolgandek harakat qiladi:

html<div id="elem1"></div>
<div id="elem2"></div>

css#elem1 {
  position: relative;
  top: 30px;
  
  width: 100px;
  height: 100px;
  border: 1px solid green;
}
#elem2 {
  width: 200px;
  height: 200px;
  border: 1px solid red;
}

Результат:

Misol

Keling shuningdek, blokimizni left xususiyatini belgilab, chapdan 40px surib ko'ramiz:

html<div id="elem1"></div>
<div id="elem2"></div>

css#elem1 {
  position: relative;
  top: 30px;
  left: 40px;
  
  width: 100px;
  height: 100px;
  border: 1px solid green;
}
#elem2 {
  width: 200px;
  height: 200px;
  border: 1px solid red;
}

Результат:

Misol

top, right, bottom va left xususiyatlarining salbiy qiymatlari teskari yo'nalishda siljiydi. Masalan, top ning ijobiy qiymati pastga siljiydi, salbiy qiymati esa yuqoriga.

Keling ikkinchi blokimizni top xususiyatiga salbiy qiymat berib, yuqoriga 40px suramiz:

html<div id="elem1"></div>
<div id="elem2"></div>

css#elem1 {
  width: 100px;
  height: 100px;
  border: 1px solid green;
}
#elem2 {
  position: relative;
  top: -40px;
  left: 20px;
  
  width: 200px;
  height: 200px;
  border: 1px solid red;
}

Результат:

Amaliy vazifalar

html<div id="elem1"></div>
<div id="elem2"></div>
<div id="elem3"></div>
text text text

css#elem1 {
  width: 100px;
  height: 100px;
  margin-bottom: 20px;
  background-color: #FF8888;
}
#elem2 {
  width: 100px;
  height: 100px;
  margin-bottom: 20px;
  background-color: #7E89EB;
}
#elem3 {
  width: 100px;
  height: 100px;
  margin-bottom: 20px;
  background-color: #4DEE99;
}