# Отрицательные значения при позиционировании

Изученные нами свойства `top`, `right`, `bottom` и `left` могут принимать не только положительные, но и отрицательные значения. Давайте посмотрим на примерах.

## Пример

В следующим примере элемент абсолютно позиционируется относительно своего родителя и стоит в позиции `0` сверху, `0` слева:

`<div id="parent"> <div id="child"></div> </div>` `#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` слева:

`<div id="parent"> <div id="child"></div> </div>` `#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; }`

:

В следующем образце зеленый блок стоит по центру экрана с помощью `margin`, а красные блоки позиционируются относительно него. Повторите страницу по приведенному образцу:

←→
↑