CSS: Позиционирование объекта

Чтобы разместить очередной блок на странице сайта, ему нужно прописать position – другими словами, указать способ позиционирования этого элемента относительно окна браузера или других объектов.
Position может принимать значения: absolute | fixed | relative
Для размещения нашего объекта нужно знать: его координаты (Х и Y); выбрать наиболее подходящее позиционирование (relative, absolute или fixed).
И так, начнем экспериментировать. Разметим наше окно браузера цифрами и выберем «подопытного кролика». Пускай это будет смайлик.

position:absolute

Абсолютное позиционирование (position: absolute). В таком случае, элемент размещается на странице то место, которое указано в свойствах — bottom | left | right | top. Значение расстояний могут задаваться в пикселях, процентах или др., но значение по умолчанию – auto.
При абсолютном расположении, элемент может размещаться по верх других элементов и положение этих элементов, их свойства, на него не влияют.
Например, если для нашего смайлика <img> присвоим класс «smile» и зададим расстояния bottom и left
.smile{
position:absolute;
bottom:300px;
left:100px;
}
то он будет располагаться слева, где-то посредине окна браузера.

position: fixed

Фиксированное позиционирование (position: fixed) практически ни чем не отличается от абсолютного. Здесь, наш смайлик будет размещен также поверх текста (других элементов страницы) с координатами Х и Y, но вот при прокрутке страницы элемент не будет изменять своего положения.
Чтобы задать фиксированное положение, необходимо
.smile{
position:fixed;
bottom:300px;
left:100px;
}

В результате мы получили накладывание слоев: первый – это наш текст; второй – смайлик. Размещение верхнего слоя, относительно первого можно определять с помощью свойства z-index. Для себя, это свойство я всегда ассоциирую с многоэтажным домом, на который смотрю с высоты птичьего полета.

z-index

Cвойство z-index позволяет указать браузеру поочередность отображение элементов страницы. Данное свойство может быть auto (очередность расположение слоев происходит в соответствии с html-кодом) или целым числом (чем выше значение слоя, тем более выше его положение).
z-index может быть отрицательным, но следует помнить, что не все браузеры правильно интерпретируют отрицательные значения. Еще необходимо отметить, что при равном значении z-index, на переднем плане находится тот элемент, который в коде HTML идет ниже остальных.

position: relative

Чтобы задать элементу относительное позиционирование, установите в свойстве position: relative.
При position: relative элемент располагается в том месте, где ему указывают. К примеру, если для элемента указать top и left значения 10px, то на странице, он будет смещен вправо на 10рх от левого верхнего угла (работает условие left) и на 10рх вниз (правило top). Но! Такое смещение смайлика не будет влиять на перегруппировку окружающих элементов. В результате, мы будем наблюдать пустое место (где должен располагаться смайлик) и простое наложение элементов (смещение смайлика) сверху (top:200px;) и слева (left:100px;)
.smile{
border:1px solid red;
position:relative;
top:200px;
left:100px;
}
Заметьте, что указанные отступы в 100 и 200 пикселей отсчитываться не с исходной точки (начало страницы), а от первоначального положения нашего смайлика.

Вот пожалуй на этом можно и остановиться. Надеюсь, «смайлик» помог мне объяснить возможные варианты позиционирования.