CSSda elementlarni absolyut pozitsiyalash

Ushbu darsda biz elementlarni absolyut pozitsiyalashni tahlil qilamiz. Bu elementlarni sahifa koordinatalari bo‘yicha joylashtirish imkonini beradi. Masalan, elementni sahifaning yuqori qismidan 100px va chap tomondan 200px pozitsiyasiga joylashtirish mumkin. Element u erga ko‘chib o‘tadi, u yerda boshqa elementlar joylashganligiga qaramay va shunchaki ularning ustiga chiqadi. Aytishlaricha, bu holda element normal hujjat oqimidan chiqib ketadi: barcha qolgan elementlar shunday harakat qiladiki, go‘yo bizning elementimiz mavjud emas.

Elementni absolyut pozitsiyalangan qilish uchun, unga position xususiyatini absolute qiymatida belgilash kerak. Ushbu xususiyatdan tashqari, yana ikkitasi kerak: biri vertikal koordinatani belgilaydi, ikkinchisi - gorizontal koordinatani.

Vertikal uchun yuqoridan yoki pastdan chetini belgilash kerak. Yuqoridan chet top xususiyati bilan belgilanadi, pastdan chet - bottom xususiyati bilan. Gorizontal uchun chapdan yoki o‘ngdan chet belgilash kerak. Chapdan chet left xususiyati bilan belgilanadi, o‘ngdan chet - right xususiyati bilan.

Keling, misollar orqali ko‘rib chiqaylik.

Misol

Boshlash uchun keling, shunchaki pozitsiyalashsiz ikkita blok yarataylik (elementlar deraza chetiga siqilmaganligiga e'tibor bering, chunki body standart bo‘yicha margin ga ega):

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

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

Результат:

Misol

Keling, endi yashil blokga absolyut pozitsiyalashni belgilab, uni yuqoridan 150px va chapdan 100px pozitsiyasiga joylashtiramiz:

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

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

Результат:

Misol

Keling, endi yashil blokni yuqoridan 0px va chapdan 0px pozitsiyasiga joylashtiramiz:

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

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

Результат:

Misol

Keling, endi yashil blokni yuqoridan 0px va o‘ngdan 0px pozitsiyasiga joylashtiramiz:

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

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

Результат:

Misol

Keling, endi yashil blokni pastdan 0px va o‘ngdan 0px pozitsiyasiga joylashtiramiz:

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

css#elem1 {
  width: 200px;
  height: 200px;
  border: 1px solid red;
}
#elem2 {
  position: absolute;
  bottom: 0;
  right: 0;
  
  width: 100px;
  height: 100px;
  border: 1px solid green;
}

Результат:

Misol

Keling, endi yashil blokni pastdan 0px va chapdan 0px pozitsiyasiga joylashtiramiz:

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

css#elem1 {
  width: 200px;
  height: 200px;
  border: 1px solid red;
}
#elem2 {
  position: absolute;
  bottom: 0;
  left: 0;
  
  width: 100px;
  height: 100px;
  border: 1px solid green;
}

Результат:

Amaliy vazifalar