Позиционирование.Для начала разберемся с самим понятием позиционирование. Позиционированием называют определение конкретного месторасположения на странице того или иного элемента (бокса). Позиционирование бывает абсолютным, относительным, фиксированным и статическим. Потороплюсь с примером, ниже будем разбираться, что в нем написано. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html> <head> <title>Позиционирование.</title> </head> <body> <div style="float: left; background: #c00; border-style: double; padding: 5px; height: 1500px; width: 300px"> <div style="position: relative; left: 10px; top: 50px; background: #c0c; border-style: double; padding: 5px; width: 200px">Блок позиционирован относительно крёв элемента родителя.</div> </div> <div style="position: absolute; left:200px; top: 350px; background: #cc0; border-style: double; padding: 5px; width: 200px">Блок абсолютно позицонорован и выведен из общего потока, его положение задаётся от краёв окна браузера. Как видите данный блок может накладываться на другие элементы страницы.</div> <div style="position: fixed; left: 150px; top: 150px; background: #0cc; border-style: double; padding: 5px; width: 200px">А это фиксированный блок, тоже выведен из общего потока однако при прокручивании страницы он не меняет своего положения. Ранние версии браузера Internet Explorer игнорируют данное свойство.</div> </body> </html> Итак, для того, что бы позиционировать какой либо элемент к нему применяют свойство position и одно из его возможных значений:
Теперь давайте углубляться.. Абсолютное позиционирование.Абсолютно позиционированный элемент (position: absolute) выводится из общего потока и несмотря на другие элементы и их взаимное расположение, занимает указанное место на странице от края/краёв окна браузера. При таком способе позиционирования один элемент может накладываться поверх другого. Для того чтобы позиционировать элемент от края/краёв окна браузера, нам понадобятся следующие свойства CSS:
Данные расстояния могут быть заданы в пикселях, процентах или любых других принятых единицах измерения CSS, значение по умолчанию - auto. Пример: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html> <head> <title>Абсолютное позиционирование.</title> </head> <body> <div style="background: #0f0; border: #000000 2px solid; padding: 5px; margin: 10px; width: 300px; height: 200px;"><h1>Блок №1</h1></div> <div style="background: #00f; border: #000000 2px solid; padding: 5px; margin: 10px; width: 500px; height: 100px;"><h1>Блок №2</h1></div> <div style="position: absolute; left:200px; top: 100px; background: #f00; border: #000 2px solid; padding: 5px; width: 200px; height: 200px;"><h1>Блок №3</h1> Данный блок абсолютно позиционирован! <br><br> Блоки 1 и 2 никак не влияют на его месторасположение.</div> </body> </html> Как видите, в примере третий блок вышел из общего потока элементов и живёт по своим собственным правилам, остальная разметка страницы никак не влияет на месторасположение данного блока. Относительное позиционирование.Относительное позиционирование (position: relative) определяет место элемента относительно краёв элемента родителя и не выводится из общего потока. Так же как и в случае с абсолютным позиционированием расстояния от края/краёв родительского элемента задаётся с помощью свойств: bottom, left, right, top. Пример: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html> <head> <title>Относительное позиционирование.</title> <style type="text/css"> h1 { color: #008000; font-size:20px } div.blok1 { background: #c0e4ff; border: #000000 2px solid; padding: 5px; width: 500px; height: 400px; } div.blok2 { position: relative; left: 150px; background: #ffa0c5; border: #000 2px solid; padding: 5px; width: 250px; height: 200px; } </style> </head> <body> <div class="blok1"> <h1>Элемент родитель - блок №1</h1> <div class="blok2"> <h1>Блок №2</h1> Данный блок позиционирован относительно левого края элемента родителя. </div> </div> </body> </html> В случае если элемент родитель явно не задан, то отчет ведётся от края/краёв окна браузера. Фиксированное позиционирование.Фиксированное позиционирование (position: fixed) похоже на абсолютное, элемент выводится из общего потока, его координаты рассчитываются от краёв окна браузера, но при прокрутке страницы элемент не меняет своего положения. Пример: Файл style.css
h1 { color: #800; text-align: center; font-size:30px } h2 { color: #088; text-align: center; font-size:18px } div.blok1 { background-image: url(fon.gif); border: #000 2px solid; padding: 5px; width: 800px; height: 4000px } div.blok2 { position: fixed; left: 250px; top: 300px; border: #080 6px double; padding: 5px; width: 300px } Файл index.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Фиксированное позиционирование.</title> <link rel="stylesheet" href="style.css" type="text/css"> </head> <body> <div class="blok1"> <h1>Какая то страничка</h1> </div> <div class="blok2"> <h2>Фиксированный блок с навязчивой рекламой</h2> <h1>Купи слона!!</h1> Фиксированный блок, выведен из общего потока элементов, при прокручивании страницы он не меняет своего положения. Ранние версии браузера Internet Explorer игнорируют данное свойство. </div> </body> </html> P.S. Ранние версии браузера Internet Explorer игнорируют данное свойство и элемент выводится на странице так как будто его вовсе не позиционировали. z-index
Как уже говорилось, выше позиционированные элементы могут накладываться один поверх другого, имитируя тем самым некую трёхмерность страницы, где каждый последующий наложенный друг на друга элемент является слоем. Свойство z-index позволяет веб-мастеру управлять позициями этих слоёв в глубину экрана (по оси Z.) , другими словами позволяет указывать браузеру какие элементы следует показывать на переднем плане, а какие на заднем. Значения свойства z-index:
Пример: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html> <head> <title>z-index</title> </head> <body> <div align="center" style="position: absolute; z-index:5; width: 350px; height: 100px; top: 120px; left: 0px; color: #0000ff; font-size:100px">z-index</div> <div style="position: absolute; z-index:3; width: 150px; height: 150px; top: 0px; left: 100px; background-color: #ff00ff"> </div> <div style="position: absolute; z-index:4; width: 150px; height: 150px; top: 100px; left: 0px; background-color: #ff0000"> </div> <div style="position: absolute; z-index:2; width: 150px; height: 150px; top: 100px; left: 200px; background-color: #ffff00"> </div> <div style="position: absolute; z-index:1; width: 150px; height: 150px; top: 200px; left: 100px; background-color: #00ff00"> </div> </body> </html> Числовое значение z-index может быть и отрицательным, однако не все браузеры правильно интерпретируют отрицательные значения. Еще следует отметить, что при равном значении z-index, на переднем плане находится тот элемент, который в коде HTML идет ниже остальных. Это же правило действует при z-index равным auto или же в том случае если бы данное свойство и вовсе не применялось к тем или иным элементам. Ну и какой смысл, спросите Вы, вообще использовать z-index если можно просто в нужном порядке расположить элементы в HTML коде? Покажу на примере: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html> <head> <title>z-index</title> <style type="text/css"> body {background-color: #c5ffa0} a { position: absolute; z-index: auto; top: 100px; border: #000000 1px solid; } a:hover { position: absolute; z-index:1; top: 80px; border: #800000 1px solid; } </style> </head> <body> <h2>Проведите курсором по картам</h2> <a href="#" style="left: 10px"><img src="karta1.gif"></a> <a href="#" style="left: 30px"><img src="karta2.gif"></a> <a href="#" style="left: 50px"><img src="karta3.gif"></a> <a href="#" style="left: 70px"><img src="karta4.gif"></a> <a href="#" style="left: 90px"><img src="karta5.gif"></a> <a href="#" style="left: 110px"><img src="karta6.gif"></a> <p style="position: absolute; left: 10px; top: 250px;">В злосчастном IE6, в отличии от других браузеров, псевдокласс <b>:hover</b> работает только для ссылок, поэтому в качестве контейнера для рисунков/карт использую никуда не ведущую ссылку. (<b>a href="#"</b>)</p> <p style="position: absolute; left: 10px; top: 300px;">Впрочем, IE можно "надурить" используя скрипты, просто не хочу лишний раз выходить за рамки обучения CSS.</p> </body> </html> Как видите свойство z-index незаменимо там, где присутствует некая динамика. Полезные советы:Попугаю немного:
Такие дела.. ну хочу заметить, что поклонников браузера IE (домохозяек, для которых Интернет и встроенный в комплектацию Windows Internet Explorer это одно и тоже) остаётся с каждым днем всё меньше и меньше тем более его старых версий, так что можно и рискнуть.. если по-другому никак.. |
