САМОУЧКА Сайт для тех, кто хочет научиться

Главная

О Нас

Публикации

Связь

Наши публикации

HTML для новичков

XHTML

CSS для новичков

CSS 3

JavaScript

< Предыдущая Следующая >

С помощью 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 свойства

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

Свойства	Описание	Значения
clip	Обрезает элемент размещенный абсолютно.	rect auto inherit
cursor	Задает вид, который будет принимать курсор при наведении на элемент.	auto crosshair default pointer move e-resize ne-resize nw-resize n-resize se-resize sw-resize s-resize w-resize text wait help
overflow	Устанавливает как должно быть отображено содержимое вышедшее за границы элемента.	auto hidden scroll visible inherit

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

Задание 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' />

  

  
 
 
 
 

< Предыдущая Следующая >

Последние добавления

HTML для новичков

XHTML

CSS для новичков