Управляем положением слоя с помощью z-index


Элементы HTML при добавлении на веб страницу накладываются друг на друга слоями, то есть, каждый следующий кодируемый элемент содержится в слое, который располагается поверх предыдущих элементов. Обычно, это разделение на слои не заметно и его не требуется знать, так как элементы страницы располагаются в нормальном потоке следования и не перекрываются.

Однако когда элементы позиционируются на странице с помощью свойства position со значением absolute или relative, они могут перекрываться, делая разбиение на слои явным. Также может понадобиться изменить используемое по умолчанию разбиение на слои, чтобы элементы были представлены в требуемом порядке наложения.

CSS предоставляет нам средство для управления расположением слоев на веб странице, с помощью свойства стиля z-index. Можно явно изменить используемое по умолчанию разбиение элементов страницы на слои, кодируя их свойство стиля z-index.

Значение z-index является относительной величиной. Элементы с большими числовыми значениями появятся поверх элементов с меньшими значениями. Так, элемент с z-index:2 появится поверх элемента с z-index:1, элемент с z-index:20 появится поверх элемента с z-index:10. Абсолютное значение z-index не имеет значения. Важны только относительные величины z-index, присвоенные множеству разбитых по слоям элементов.

Цветные квадраты демонстрируют различные позиции и слои. В этом примере распределение по слоям задается только порядком по умолчанию, в котором квадраты были закодированы: закодированные последними появляются поверх кодированных ранее.

<style>
.red_rel   {
       float:left; position:relative; width:100; height:100; left:0px; top:0px;
           background-color:red; border:solid 1px white; color:white; 
           text-align:right; z-index:1;
}
.green_rel {
       float:left; position:relative; width:100; height:100; left:-50px; top:25px;
           background-color:green; border:solid 1px white; color:white;
           text-align:right; z-index:2;
}
.blue_rel  {
       float:left; position:relative; width:100px; height:100px; left:-100px; top:50px;
           background-color:blue; border:solid 1px white; color:white; 
           text-align:right; z-index:3;
}
</style>
<div style="border:solid 1px red; position:relative; left:50px; top:50px; ">
<div>
<div class="red_rel">Red</div>
<div class="green_rel">Green</div>
<sdiv class="blue_rel">Blue</div>
</div>
z-index

Квадраты располагаются на веб странице в нормальном потоке следования элементов. Красный квадрат был закодирован первым, поэтому он появляется под зеленым, который закодирован вторым, зеленый появляется под синим квадратом, который закодирован третьим.

Квадраты создаются с помощью тегов <div>, для которых заданы ширина, высота, цвет, цвет фона, и границы. Для создания этих слоев не требуется задание значения z-index.

Однако, квадратам задаются параметры стиля left и top для смещения их по горизонтали и вертикали от их естественного положения бок-о-бок, чтобы они стали перекрывающимися и их распределение по слоям стало визуально очевидно.

Для приведенных выше квадратов можно изменить порядок слоев, просто присваивая им значения z-index. В следующем коде красному квадрату присвоено наибольшее значение (что делает его верхним), а синему квадрату - наименьшее (что делает его нижним). Порядок кодирования тегов <div> остается без изменения. Вывод этих квадратов показан на рисунке

<style>
.red_rel   {
       float:left; position:relative; width:100; height:100; left:0px; top:0px;
           background-color:red; border:solid 1px white; color:white; 
           text-align:right; z-index:3;
}
.green_rel {
       float:left; position:relative; width:100; height:100; left:-50px; top:25px;
           background-color:green; border:solid 1px white; color:white;
           text-align:right; z-index:2;
}
.blue_rel  {
       float:left; position:relative; width:100px; height:100px; left:-100px; top:50px;
           background-color:blue; border:solid 1px white; color:white; 
           text-align:right; z-index:1;
}
</style>
z-index1

Для размещения элементов страницы относительно друг друга можно применить следующее решение:
    -определяем и задаем размер тега <div>, который будет охватывать размещенные элементы. Используем для раздела <div> относительное позиционирование, размещая его тем самым в потоке следования контента страницы.

Когда содержимое на странице добавляется или удаляется, то этот раздел по-прежнему сохраняет свое относительное расположение среди других элементов страницы. Он перемещается по странице вверх или вниз, когда изменяется содержимое страницы;

    - помещаем элементы, которые будут находиться внутри раздела, используя абсолютное позиционирование.

В этом случае значения left и top для размещаемых элементов всегда измеряются от левого верхнего угла родительского элемента. Эта "локальная" система координат остается неизменной, даже если родительский элемент изменяет положение в потоке элементов страницы.

Родительский элемент тег <div>, использует относительное позиционирование, чтобы сохранять свое положение среди других элементов HTML на странице. Он выводится с точечной границей (dotted), чтобы сделать его видимым. Вложенные квадраты, заключенные в теги <span> позиционируются абсолютно, со значениями top и left, измеряемыми от левого верхнего угла этого раздела.

<style>
#div_rel  {
       position:relative; width:400px; height:250px; border:dotted 1;
       background-color:white;
}
#red_abs   {position:absolute; width:100px; height:100px; left:0px; top:0px;
           background-color:red; border:solid 1px white; color:white; 
           text-align:right; z-index:1;
}
#green_abs {position:absolute; width:100px; height:100px;  left:50px; top:25px;
           background-color:green; border:solid 1px white; color:white;
           text-align:right; z-index:2;
}
#blue_abs {position:absolute; width:100px; height:100px;  left:100px; top:50px;
           background-color:blue; border:solid 1px white; color:white; 
           text-align:right; z-index:3;
}
</style>
<div id="div_z">
z-index: 
</div><br />
<div id="div_s">
Вернуть значения по умолчанию 
</div><br />
<div id="div_rel">
<span id="red_abs">Red</span>
<span id="green_abs">Green</span>
<span id="blue_abs">Blue</span>
</div>

Созданный с помощью тега <div> контейнер можно перемещать в любое место на странице, а содержащиеся в нем элементы будут сохранять свои абсолютные позиции. Не требуется заново вычислять их координаты, так как они всегда задаются относительно верхнего левого угла родительского элемента тега <div>.

z-index:

Red Green Blue


Поэкспериментируйте с положением слоев с помощью z-index, покликав мышкой по разноцветным квадратам следуя следующим правилам:
SHIFT + клик - z-index:3
CTRL + клик - z-index:2
простой клик - z-index:1
Клик по надписи Вернуть значения по умолчанию - возвращает значения по умолчанию.
А для большей наглядности выводится подсказка текущего значения z-index.

Для того чтобы лучше понять идеологию абсолютного и относительного позиционирования элементов на веб странице рекомендую прочитать пост: "Абсолютное и относительное позиционирование элементов на странице" , а если вас заинтересовало абсолютное позиционирование объектов обратитесь: "Абсолютное позиционирование слоя на веб-странице".

Автор: Сергей Зарубин

Дата: 2011-05-15

Колличество просмотров: 10336

Нравится

Комментарии к заметке:

Комментарий добавил(а): lElenaSn
Дата: 2017-06-13

Наш сервис предоставляет настоящие лайки на фотографии заказчиков, которые готовы платить за качество.

Именно для этого мы и набираем удалённых сотрудников, которые будут выполнять работу, то есть ставить лайки и зарабатывать за это деньги.

Чтобы стать нашим удалённым сотрудником и начать ставить лайки, зарабатывая при этом 45 рублей за 1 поставленный лайк,

достаточно просто зарегистрироваться на нашем сервисе. > http://oplata-vklike.tk/ <

Вывод заработанных средств ежедневно в течении нескольких минут.



Добавить новый комментарий


Введите число с картинки:

captcha