Тема 5. Управление Позиционированием элемента
Объявляя атрибуты в селекторе HTML-тега в CSS, определяется содержимое тега как уникальный объект в окне, которым затем можно управлять с помощью CSS-позиционирования.
Положение элемента может быть статическим, относительным, абсолютным или фиксированным, но в большинстве браузеров доступны лишь три первых варианта. Браузер размещает элемент в окне, используя определенный тип его положения.
POSITION. Позиционирование элемента.
ABSOLUTE. Абсолютное позиционирование
Указывает, что элемент абсолютно позиционирован, при этом другие элементы отображаются на веб-странице словно абсолютно позиционированного элемента и нет. Положение элемента задается свойствами left, top, right и bottom, также на положение влияет значение свойства position у родительского элемента. Так, если у родителя значение position установлено как static или родителя нет, то отсчет координат ведется от края окна браузера. Если у родителя значение position задано как fixed, relative или absolute, то отсчет координат ведется от края родительского элемента.
position: absolute
bottom: 15px;
right: 15px;
FIXED. Фиксированное позиционироване
По своему действию это значение близко к absolute, но в отличие от него привязывается к указанной свойствами left, top, right и bottom точке на экране и не меняет своего положения при прокрутке веб-страницы. Браузер Firefox вообще не отображает полосы прокрутки, если положение элемента задано фиксированным, и оно не помещается целиком в окно браузера. В браузере Opera хотя и показываются полосы прокрутки, но они никак не влияют на позицию элемента.
position: fixed;
bottom: 15px;
right: 15px;
! Не поддерживается IE6.
RELATIVE. Относительное позиционирование
Положение элемента устанавливается относительно его исходного места. Добавление свойств left, top, right и bottom изменяет позицию элемента и сдвигает его в ту или иную сторону от первоначального расположения.
position: relative;
bottom: 15px;
right: 15px;
STATIC. Статическое позиционирование
Элементы отображаются как обычно. Однако статические элементы отличаются тем, что их нельзя позиционировать или перемещать.
position: static;
Настройка положения элемента
Кроме полей, которые вы можете настраивать вместе с параметрами элемента, позиционированный элемент может иметь значение параметра top, значение параметра left, значение параметра bottom и значение параметра right, которые используются для позиционирования элемента по отношению к четырем сторонам.
LEFT. Настройка положения слева
Для позиционированного элемента определяет расстояние от левого края родительского элемента, не включая отступ, поле и ширину рамки, до левого края дочернего элемента. Отсчет координат зависит от значения свойства position. Если оно равно absolute, в качестве родителя выступает окно браузера и положение элемента определяется от его левого края. В случае значения relative:left отсчитывается от левого края родительского элемента. В качестве значений принимаются любые единицы длины, принятые в CSS. Значение свойства left может быть и отрицательным.
left: 15px;
RIGHT. Настройка положения справа.
Действует так же как и при указании положения left, только для положения справа.
В качестве значений принимаются любые единицы длины, принятые в CSS. Значение свойства right может быть и отрицательным.
right: 15px;
TOP. Настройка положения сверху.
Действует так же как и при указании положения left и right, только для положения сверху.
В качестве значений принимаются любые единицы длины, принятые в CSS. Значение свойства right может быть и отрицательным.
top: 15px;
BOTTOM. Настройка положения снизу.
Действует так же как и при указании положения left, right и top только для положения снизу.
В качестве значений принимаются любые единицы длины, принятые в CSS. Значение свойства bottom может быть и отрицательным.
bottom: 15px;
Z-INDEX. 3D-позиционирование
Несмотря на то что экран представляет собой двухмерное пространство, позиционированным элементам можно задать и третью размерность, то есть расположить их по отношению друг к другу в порядке стека.
Позиционируемым элементам в порядке их появления автоматически присваивается номер: 0, 1, 2, 3,... Номер выбирается по отношению к родительскому элементу и другим его потомкам. Такая система называется z-индекс Номер z-индекса элемента определяет его ЗD-отношение к другим элементам окна.
Это свойство работает только для элементов, у которых значение position задано как absolute, fixed или relative.
Если элементы накладываются друг на друга, то на переднем плане появляется тот, чей номер больше.
position: absolute;
z-index: 3;
Задание 5.1 Определение положения элемента
Создайте html файл добавьте в него несколько параграфов. Добавьте на страницу следующие стили:
<style type="text/css">
.stat
{
position: static;
font: bold 28pt courier;
color:#cccccc;
}
.abs
{
position: absolute;
top: 25px;
left: 375px;
width: 100px;
font: bold 35pt helvetica;
color: #666666;
}
.rel
{
position: relative;
top: 70px;
left: 25px;
font: bold 12 pt times;
color: #000000;
}
</style>
Задание 5.2 Настройка положения вверху и слева
Создайте html файл добавьте в него несколько элементов. Добавьте на страницу следующие стили:
<style type="text/css">
#object
{
position: absolute;
top: 125px;
left: 12em;
border: silver solid 2px;
}
.changeplace
{
position: relative;
top: 1cm;
left: 1cm;
background-color: #ffcccc;
}
</style>
Задание 5.3 Определение положения по отношению к правому нижнему углу
Создайте html файл добавьте в него несколько элементов. Добавьте на страницу следующие стили:
<style type="text/css">
#object
{
position: absolute;
bottom: 125px;
right: 12em;
border: silver solid 2px;
}
.changeplace
{
position: relative;
bottom: 1cm;
right: 1cm;
background-color: #ffcccc;
}
</style>
Задание 5.4 Определение положения в порядке стека
Создайте html файл добавьте в него четыре изображения. Добавьте на страницу следующие стили:
<style type="text/css">
#element1
{
position: absolute;
z-index: 3;
top: 175px;
left: 255px;
}
#element2
{
position: absolute;
z-index: 2;
top: 100px;
left: 170px;
}
#element3
{
position: absolute;
z-index: 1;
top: 65px;
left: 85px;
}
#element4
{
position: absolute;
z-index: 0;
top: 5px;
left: 5px;
}
</style>
Задание 5.5 Разметка без таблиц
<div id="book">
<dl>
<dt>Книга самурая</dt>
<
dd
class="img">
<img src="../images/eay.jpg" width="80"
height="80" alt="Книга самурая">
</dd>
<dd>Самурай должен прежде всего постоянно помнить
— помнить днем и ночью, с того утра, когда он
берет в руки палочки, чтобы вкусить новогоднюю
трапезу, до последней ночи старого года, когда
он платит свои долги — что он должен умереть.
</dd>
</dl>
<dl class="alt">
<dt>Книга самурая</dt>
<dd class="img">
<img src="../images/eay.jpg" width="80"
height="80" alt="Книга самурая">
</dd>
<dd>Самурай должен прежде всего постоянно помнить — помнить днем и ночью, с того утра,
когда он берет в руки палочки, чтобы вкусить новогоднюю трапезу, до последней ночи
старого года, когда он платит свои долги — что он должен умереть.
</dd>
</dl>
<dl>
<dt>Книга самурая</dt>
<dd class="img">
<img src="../images/eay.jpg" width="80" height="80" alt="Книга самурая"></dd>
<dd>Самурай должен прежде всего постоянно помнить — помнить днем и ночью, с того утра,
когда он берет в руки палочки, чтобы вкусить новогоднюю трапезу, до последней ночи
старого года, когда он платит свои долги — что он должен умереть.
</dd>
</dl>
</div>
<
style>
#book
{
float:left;
width:304px;
padding:10px 10px;
border: 2px solid #C8CDD2;
background-image:url(../images/bg.jpg);
background-repeat:repeat-x;
}
#book dt
{
margin:0;
padding:0;
font-size: 130%;
letter-spacing: 1px;
color:#627081;
float:right;
width: 205px;
}
#book dd
{
margin:0 0 0 98px;
padding: 0;
font-size: 85%;
line-height: 1.5em;
color: #666;
}
#book dl dd.img
{
margin: 0;
}
#book dd.img img
{
float:left;
margin: 0 8px 0 0;
padding: 4px;
border: 1px solid #D9E0E6;
border-bottom-color: #C8CDD2;
border-right-color: #C8CDD2;
background: #fff;
}
#book .alt dt
{
float:left;
}
#book .alt dd
{
margin: 0 98px 0 0;
}
#book .alt dd.img img
{
float: right;
margin: 0 0 0 8px;
}
</style>