CSS-de ýerleşdirmäde ters bahalar

Biziň öwrenen aýratynlyklarymyz top, right, bottom we left diňe ýörite bolmadyk, eýsem ters bahalary hem kabul edip biler. Geliň mysallar bilen göreliň.

Mysal

Aşakdaky mysalda element öz eýesine garaşlylykda doly ýerleşdirilýär we ýokardan 0, çepden 0 ýerinde durýar:

html<div id="parent">
  <div id="child"></div>
</div>

css#parent {
  position: relative;
  width: 300px;
  height: 300px;
  margin: 50px auto;
  border: 1px solid red;
}
#child {
  position: absolute;
  top: 0;
  left: 0;
  
  width: 100px;
  height: 100px;
  border: 1px solid green;
}

Результат:

Mysal

Indi bolsa, element ýokardan -20px, çepden -30px ýerine göçüreliň:

html<div id="parent">
  <div id="child"></div>
</div>

css#parent {
  position: relative;
  width: 300px;
  height: 300px;
  margin: 50px auto;
  border: 1px solid red;
}
#child {
  position: absolute;
  top: -20px;
  left: -30px;
  
  width: 100px;
  height: 100px;
  border: 1px solid green;
}

Результат: