CSSда элементларнинг нисбий позиционланиши

Нисбий позиционланиш свойстваining relative қиймати ёрдамида белгиланади position. Бундай позиционланиш элементга ўзнинг жорий ўрнидан белгиланган миқдорга силжиш имконини беради. Бунда саҳифанинг қолган барча элементлари ўйлайдики, элемент аввалги ўрнида тургандек. Яъни бундай позиционланиш турида элемент оддий окимдан чиқиб кетмайди.

Жорий ўриндан силжишлар свойствалар ёрдамида белгиланади top, right, bottom ва left.

Мисол

Аввалбошда биз жуда иккита блок ясаймиз позиционланишсиз:

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

Результат:

Мисол

Энди биринчи блокка relative қўшаймиз. Бундан ҳозирча ҳеч нарса ўзгармайди, чунки биз блокнинг силжишини кўрсатмадик:

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

Результат:

Мисол

Энди блокнимизни 30px юқорига силжитайлик, унига top свойствасини бериб. Бунда қолган барча элементлар ўзини ўйлайди шунидекки, бизнинг блок аввалги ўрнида тургандек:

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

Результат:

Мисол

Блокнимизни 40px чапга ҳам силжитайлик, унига left свойствасини бериб:

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

Результат:

Мисол

Салбий қийматлар свойствалари top, right, bottom ва left тескари йўналтирилган силжитади. Масалан, мусбат қиймат top пастга силжитади, ва салбий - юқорига.

Иккинчи блокнимизни 40px юқорига силжитайлик, унига салбий қиймат бериб top свойстваси:

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

Результат:

Амалий машқлар

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