 |
Фиксированное позиционирование.
|
|
|
|
Фиксированное позиционирование (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:
- auto - Элементы накладываются друг на друга в том порядке, каком они указаны в коде 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>
</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 незаменимо там, где присутствует некая динамика.
Полезные советы:
Попугаю немного:
· Списки, созданные с помощью тега select, в Internet Exolorer отображаются поверх других элементов, несмотря на то, какое указано значение z-index.
· В браузере Netscape 4.x поля форм всегда отображаются поверх всех других элементов, независимо от значения z-index..
· Браузер Netscape 4.x относительно (position: relative) не позиционирует поля форм, списки, изображения, таблицы и их ячейки, а абсолютное позиционирование (position: absolute) не работает со списками и элементами форм.
· Ранние версии Internet Explorer, до Internet Explorer 5.5, игнорируют свойство z-index примененное к фреймам (frame) и плавающим фреймам (iframe).
· В IE 4 абсолютное позиционирование (position: absolute) примененное к ссылкам и спискам не работает, ссылки так вообще теряют свою функциональность.. а относительное позиционирование (position: relative) не дружит с ячейками таблицы (td и th).
· Про фиксированное позиционирование (position: fixed) и ранние версии Internet Explorer уже говорил.. не работает фиксация блоков в ранних IE и все тут..
Такие дела.. ну хочу заметить, что поклонников браузера IE (домохозяек, для которых Интернет и встроенный в комплектацию Windows Internet Explorer это одно и тоже) остаётся с каждым днем всё меньше и меньше тем более его старых версий, так что можно и рискнуть.. если по-другому никак..
Глава 13
Стиль списка.
В девятой главе учебника HTML мы с Вами уже знакомились с таким немаловажным элементом как список и действительно хорошее средство для структуризации данных. Однако списки организованные одними средствами HTML весьма убоги в плане дизайна и не радуют глаз человека.
|
|
|
В этой главе мы немного поколдуем над списками с помощью свойств CSS. Так мы будем говорить о стиле списка, то для обучения Вам понадобится базовая информация о тегах: <ul> <ol> <li> <dl> <dt> <dd> - изложенная в учебнике HTML глава 9 "Списки" - рекомендую освежить в голове информацию о данных элементах, прежде чем приступать к работе.
Ну а если в голове и так свежо тогда начнем!
|
|
|
