Html - CSS блок поверх всего контента - Stack Overflow на русском

Html - CSS блок поверх всего контента - Stack Overflow на русском

Глава 12

Для начала разберемся с самим понятием позиционирование. Позиционированием называют определение конкретного месторасположения на странице того или иного элемента (бокса). Позиционирование бывает абсолютным, относительным, фиксированным и статическим.

Потороплюсь с примером, ниже будем разбираться, что в нем написано.

<!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 и одно из его возможных значений:

  • absolute - Абсолютное позиционирование элемента.
  • relative - Относительное позиционирование элемента.
  • fixed - Фиксированное позиционирование элемента.
  • static - Статическое позиционирование элемента. (Элемент отображаются как обычно.)
  • inherit - Наследует значение элемента родителя.

Теперь давайте углубляться..

Абсолютно позиционированный элемент (position: absolute) выводится из общего потока и несмотря на другие элементы и их взаимное расположение, занимает указанное место на странице от края/краёв окна браузера. При таком способе позиционирования один элемент может накладываться поверх другого.

Для того чтобы позиционировать элемент от края/краёв окна браузера, нам понадобятся следующие свойства CSS:

  • bottom - Расстояние от нижнего края окна браузера.
  • left - Расстояние от левого края окна браузера.
  • right - Расстояние от правого края окна браузера.
  • top - Расстояние от верхнего края окна браузера.

Данные расстояния могут быть заданы в пикселях, процентах или любых других принятых единицах измерения 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:

  • 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 это одно и тоже) остаётся с каждым днем всё меньше и меньше тем более его старых версий, так что можно и рискнуть.. если по-другому никак..


Html - CSS блок поверх всего контента - Stack Overflow на русском 73
Как можно DIV разместить поверх другого DIV-а с определённым
Html - CSS блок поверх всего контента - Stack Overflow на русском 98
Позиционирование элементов. z-index. Учебник CSS. - Webremeslo
Html - CSS блок поверх всего контента - Stack Overflow на русском 90
Html - Как наложить один div поверх другого div - Qaru
Html - CSS блок поверх всего контента - Stack Overflow на русском 9
Наложение и порядок слоёв
Html - CSS блок поверх всего контента - Stack Overflow на русском 39
Z-index
Html - CSS блок поверх всего контента - Stack Overflow на русском 61
DIY выходного дня: настенный органайзер своими руками
Html - CSS блок поверх всего контента - Stack Overflow на русском 82
ВЯЗАНИЕ КРЮЧОК - Ленточное кружево Записи в рубрике
Html - CSS блок поверх всего контента - Stack Overflow на русском 92
Вязаные платья крючком. Схемы и описание вязания платья для
Html - CSS блок поверх всего контента - Stack Overflow на русском 22
И снова о компаньонах : Энциклопедия роз
Html - CSS блок поверх всего контента - Stack Overflow на русском 46
Интервью с раввином (Абрахам) Абэ
Html - CSS блок поверх всего контента - Stack Overflow на русском 35
Html - CSS блок поверх всего контента - Stack Overflow на русском 87
Html - CSS блок поверх всего контента - Stack Overflow на русском 1
Html - CSS блок поверх всего контента - Stack Overflow на русском 93
Html - CSS блок поверх всего контента - Stack Overflow на русском 61
Html - CSS блок поверх всего контента - Stack Overflow на русском 79
Html - CSS блок поверх всего контента - Stack Overflow на русском 46
Html - CSS блок поверх всего контента - Stack Overflow на русском 59