Қиматҳои манфӣ дар ҷойгиркунӣ дар CSS

Хусусиятҳои омӯхтаи мо top, right, bottom ва left метавонанд на танҳо мусбат, балки манфӣ гиранд. Биёед ба мисолҳаҳо нигарем.

Мисол

Дар мисоли навбатӣ элемент нисбат ба валидаи худ мутлақан ҷойгир карда мешавад ва дар мавқеи 0 аз боло, 0 аз чап қарор дорад:

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

Результат:

Мисол

Ва акнун биёед элементро ба мавқеи -20px аз боло, -30px аз чап ҳаракат кунем:

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

Результат: