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

Изученные нами свойства 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, а красные блоки позиционируются относительно него. Повторите страницу по приведенному образцу: