CSS-de elementleriň nisbi pozisionirlenmesi

Nisbi pozisionirleme position hassaýeti üçin relative bahasy bilen berilýär. Şeýle pozisionirleme elementleri öz häzirki ýerinden bellenen ululyga göçürmäge mümkinçilik berýär. Şol wagtyň özünde sahypanyň beýleki ähli elementleri elementiň başlangyçda duran ýerinde durýandygyna ýygyn bolar. Ýagny, bu görnüşli pozisionirlemede element normal akyşdan çykmaýar.

Häzirki ýerinden göçürmeler top, right, bottom we left hassaýetleri bilen bellenýär.

Mysal

Başlangyçda diňe iki blogy pozisionirlemesiz ýasaýaly:

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

Результат:

Mysal

Indi birinji bloga relative goşalyň. Şu wagt heniz hiç zat üýtgemez, sebäbi biz blogyň göçürmesini görkezmedik:

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

Результат:

Mysal

Indi biziň blogymyzy ýokardan 30px göçürip, oňa top hassaýetini belleneli. Şol wagtyň özünde beýleki ähli elementler biziň blogymyzyň başlangyçdaky ýerinde galandygyna meňzer hereket eder:

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

Результат:

Mysal

Şeýle hem biziň blogymyzy çepden 40px göçürip, oňa left hassaýetini belleneli:

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

Результат:

Mysal

top, right, bottom we left hassaýetleriniň salamat bahalary tersine ugurda göçürýär. Mysal üçin, top hassaýetiniň süýüm bahasy aşak göçürýär, ýöne salamaty bolsa ýokary.

Biziň ikinji blogymyzy ýokary 40px göçürip, oňa top hassaýetiniň salamaty bahasyny belleneli:

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

Результат:

Amaly meseleler

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