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

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

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

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

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

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

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

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

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

Статичные элементы всегда отображаются там, где они были объявлены в коде.

CSS свойства top, bottom, left и right не работают со статично размещенными элементами.

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

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

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

К фиксировано размещенным элементам могут применяться свойства 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' />