Оглавление

12.5. Позиционирование блока

Атрибут position позволяет задать способ позиционирования блока. Он может принимать одно из четырех значений:
□    static — статическое позиционирование (значение по умолчанию). Положение элемента в окне Web-браузера определяется его положением в тексте HTML-документа;
□     relative — относительное позиционирование. Координаты отсчитываются относительно позиции, в которую Web-браузер поместил бы элемент, будь он статически позиционированным;
□     absolute — абсолютное позиционирование. Координаты отсчитываются относительно левого верхнего угла родительского элемента;
□     fixed — фиксированное позиционирование. Координаты отсчитываются относительно левого верхнего угла окна Web-браузера. При прокрутке содержимого окна блок не смещается. (1)

 

 

Для указания привязки предназначены следующие атрибуты:
□      left — расстояние от левой границы;
□     top — расстояние от верхней границы;
□  right — расстояние от правой границы;
□  bottom — расстояние от нижней границы.


Эти атрибуты могут иметь отрицательные значения. Статически позиционированные элементы не имеют атрибутов left, top, right и bottom.


Давайте рассмотрим все это на примере (листинг 11).



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
              "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Позиционирование блоков</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<style type="text/css"> 
body { 
font-family: Verdana, Tahoma, sans-serif; 
font-size: 14px 
} 
div { 
border: 1px solid black 
}
.divl {
width: 10px; 
height: 2000px; 
left: 900px; 
top:0;
position : absolute 
} 
.div2 { 
height: 20px; 
position: static; 
background-color: silver 
} 
.div3 { 
height: 20px; 
position: relative; 
top: 40px;
background-color: silver 
} 
.div4 { 
width: 150px; 
height: 150px; 
position: absolute; 
top: 30px; 
left: 400px; 
background-color: green 
}
.div5 { 
width: 300px; 
min-height: 300px; 
position: absolute; 
top: 250px;
left: 400px; 
} 
.div6 { 
width: 100px; 
height: 100px; 
position: absolute; 
top: 50px;
left: 50px; 
background-color: #F5D8C1 
} 
.div7 { 
width: 150px; 
height: 300px; 
position: fixed; 
top: 150px;
left: 20px; 
background-color: #FF9600 
} 
.div8 { 
width: 100%; 
height: 50px; 
left: 0; 
bottom: 0; 
margin: 0; 
position: fixed; 
background-color: #F4AB56 
} 
</style> 
</head> 
<body>
 <div class="divl">
 D<br>
 I<br>
 V<br>
 1<br>
 </div>
 <div class="div2">DIV2 Статическое позиционирование</div> 
 <div class="div3">DIV3 Относительное позиционирование</div> 
 <div class="div4">DIV4 <br>Абсолютное лозиционирование</div> 
 <div class="div5">DIV5 <br>Абсолютное позиционирование внутри родительского блока
   <div class="div6">DIV6 <br> top: 50px; left: 50px;</div> 
 </div>
<div class="div7">DIV7 Фиксированное позиционирование</div> 
<div class="div8">DIV8 Фиксированное позиционирование относительно нижней границы</div> 
</body> 
</html>


Посмотреть пример

 

Итак, на странице восемь блоков.
Блок div1 имеет абсолютное позиционирование и смещен на 900px относительно левой границы окна Web-браузера. Для блока также указана большая высота (2000рх). Это позволит увидеть эффект фиксированного позиционирования для блоков div7 и div8, так как Web-браузер отобразит вертикальную полосу прокрутки.
Блок div2 имеет статическое позиционирование, а блок div3 — относительное. Блок div3 сдвинут на 40рх вниз относительно блока div2, а не от верхней границы окна Web-браузера.
Блоки div4, div5 и div6 имеют абсолютное позиционирование. Блок div4 сдвинут на 400рх относительно левой границы окна Web-браузера и на 30рх— относительно верхней. Внутри блока div5 расположен блок div6. Смещения этого блока отсчитываются относительно границ блока div5, а не границ окна Web-браузера.

Блоки div7 и div8 имеют фиксированное позиционирование. Блок div7 демонстрирует возможность размещения панели навигации в определенном месте, а блок div8 — прикрепление блока к нижней границе окна Web-браузера. Чтобы увидеть отличие от других видов позиционирования переместите вертикальную полосу прокрутки вниз. Эти блоки всегда остаются на своих местах и не перемещаются при прокрутке. Однако не следует забывать, что Web-браузер Internet Explorer поддерживает атрибут fixed, начиная с версии 7.0.

Примечания:
  • Web-браузер Internet Explorer поддерживает атрибут fixed начиная с версии 7.0.
<< Меню >>  
Комментарии принадлежат их авторам. Мы не несем ответственности за их содержание.
Отправитель Нити