С помощью CSS Вы можете размещать элементы где пожелаете.

Размещение элементов

С помощью свойств позиционирования Вы можете размещать элементы где пожелаете.

#pos1
{
position:absolute;
top:10px;
left:200px;
}
#pos2 
{
position:absolute;
top:1px;
left:0px;
}
#pos3
{
position:absolute;
top:100px;
right:70px;
}

Местоположение элементов задается с помощью следующих CSS свойств:

• top - устанавливает величину смещения текущего элемента от верхнего края родительского элемента;
• bottom - устанавливает величину смещения текущего элемента от нижнего края родительского элемента;
• left - устанавливает величину смещения текущего элемента от левого края родительского элемента;
• right - устанавливает величину смещения текущего элемента от правого края родительского элемента.

Описанные выше свойства не вступят в силу пока Вы не зададите способ размещения. Также способ размещения определяет поведение данных свойств.

В CSS существуют 4 различных способа размещения элементов:

Статическое размещение

Статичные элементы всегда отображаются там, где они были объявлены. CSS свойства top, bottom, left и right не работают со статичными элементами.

Все элементы по умолчанию размещаются данным способом, но Вы также можете явно объявить элемент статичным с помощью position:static.

#pos1
{
position:static;
top:40px;
left:17px;
}

Фиксированное размещение

Фиксировано размещенные элементы не изменяют своего местоположения даже при прокрутке окна браузера. К фиксировано размещенным элементам могут применяться CSS свойства top, bottom, left, right.

Элемент может быть объявлен фиксировано размещенным с помощью position:fixed.

#pos1
{
position:fixed;
right:40px;
top:17px;
}

Относительное размещение

Относительно размещенные элементы размещаются относительно их обычной позиции.

Элемент может быть объявлен относительно размещенным с помощью position:relative.

Обратите внимание: элемент будет по прежнему занимать свою изначальную позицию.

#pos1
{
position:relative;
top:40px;
left:170px;
}

Абсолютное размещение

Абсолютно размещенные элементы располагаются относительно первого родительского элемента, способ размещения которого отличен от статического. Если такие элементы не были найдены, то элемент будет расположен относительно корневого элемента (html).

Иногда для того, чтобы добиться желаемого эффекта родительский элемент специально определяется как относительно размещенный с нулевым смещением.

Вы можете объявить элемент абсолютно размещенным с помощью position:absolute.

#pos1
{
position:absolute;
top:10px;
left:200px;
}
#pos2 
{
position:absolute;
top:1px;
left:0px;
}
#pos3
{
position:absolute;
top:100px;
right:70px;
}

Наложение элементов

При применении свойств позиционирования элементы могут накладываться друг на друга. Свойство z-index позволяет установить какой элемент в случае наложения будет сверху, а какой снизу.

Элементы с большим значением свойства z-index располагаются выше других.

Обратите внимание: свойство z-index может принимать отрицательные значения.

#pos1
{
z-index:10;
}
#pos2
{
z-index:5;
}
#pos3
{
z-index:-1;
}

Связанные с размещением CSS свойства

Для того, чтобы узнать больше о желаемом свойстве щелкните на его название.

Сделайте сами

Задание 1 переместите геометрические фигуры в соответствующие им рамки с помощью свойств размещения.

<img id='geom1' src='gimg.gif' />
<img id='geom2' src='gimg2.gif' />
<img id='geom3' src='gimg3.gif' />
<img id='geom4' src='gimg4.gif' />