Иллюстрация к смещениям

Рисунок 1

Рисунок 2

Свойства left, top, right и bottom задают расстояние от соответствующих сторон (соответственно от левой, верхней, правой и нижней) блока элемента до парных им сторон блока - контейнера, в котором расположен данный элемент (смотри рисунок 1). При этом положительные и отрицательные значения для свойств определяют смещение в соответствии со следующими правилами:

На рисунке 1 значения всех четырех свойств положительны. Поэтому визуально элемент целиком расположен в области, занимаемой его контейнером. Однако если значение какого-либо свойства отрицательно, то элемент будет выходить за пределы своего контейнера. На рисунке 2 изображен случай, когда свойство left имеет отрицательно значение.