Z-индекс, вид и видимость

4. Z-индекс, вид и видимость

На этой странице:

Z-индекс

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

Блоки перекрывают друг друга. Причём, заметьте, “выше” расположен тот блок, код которого в HTML идёт позже.

Значит, управлять расположением блоков по “высоте” можно, меняя порядок следования блоков в HTML-коде.

Зададим на странице три блока:

<BODY>
  <DIV id=block1>Блок 1</DIV>
  <DIV id=block2>Блок 2</DIV>
  <DIV id=block3>Блок 3</DIV>
</BODY>

Определим для них абсолютное позиционирование и придадим индивидуальность разной расцветкой:

#block1,#block2,#block3
{
  position:absolute;
  width:200px;
  height:150px;
  border:1px solid black; 
} 
#block1
{
  left:0;top:0; 
  background:#0ff;
}
#block2
{
  left:50px;top:50px; 
  background:#ffca4c;
}
#block3
{
  left:100px;top:100px; 
  background:#0c0;
}

В CSS существует способ для явного управления взаимным положением элементов по высоте (по оси Z, которая направлена к читателю, перпендикулярно плоскости страницы). Это свойство z-index.

Элемент, значение z-index которого больше, располагается ближе к читателю.

В качестве z-index может выступать любое целое, в том числе и отрицательные числа. Значение auto эквивалентно значению 0.

`z-index`
Значения:	<целое> \| `auto` \| `inherit`
По умолчанию:	`auto`
Область применения:	позиционированные элементы (т. е. элементы, для которых `position` не равно `static`)
Наследование:	нет

Cвойство z-index позволило изменить порядок расположения блоков по оси Z без изменения порядка следования кодов в HTML.

Добавим к стилевым определениям наших блоков свойство z-index:

#block1
{
  left:0;top:0; 
  z-index:10;
  background:#0ff;
}
#block2
{
  left:50px;top:50px; 
  z-index:5;
  background:#ffca4c;
}
#block3
{
  left:100px;top:100px; 
  z-index:1;
  background:#0c0;
}

Непозиционированные элементы располагаются в плоскости, для которой z-index равен 0. Это означает, что элементы с отрицательными z-index, будут располагаться ниже обычного контента, а с положительными — выше. Следующий пример демонстрирует это.

Абзац текста находится в потоке. Первый блок располагается ниже абзаца, так как он позиционирован и для него задано z-index:-1. Второй блок располагается выше абзаца, так как он позиционирован и для него задано z-index:1.

Файл index.htm

  
<BODY>
  <DIV id=block1>Блок 1</DIV>
  <DIV id=block2>Блок 2</DIV>
  <P>
Этот текст записан внутри 
обычного непозиционированного
абзаца, который является
прямым потомком BODY. 
</BODY>

Файл style.css

  
#block1,#block2
{
  position:absolute;
  width:200px;
  height:150px;
  border:1px solid black; 
} 
#block1
{
  left:0;top:0; 
  z-index:-1;
  background:#0ff;
}
#block2
{
  left:50px;top:50px; 
  z-index:1;
  background:#ffca4c;
}
P {background:#0c0;}

Видимость элемента

Свойство visibility позволяет управлять видимостью элемента.

Элемент, для которого задано visibility:hidden остаётся на своём месте, но мы его не видим (в отличие от правила display:none, которое удаляет элемент из документа).

Потомки элемента с visibility:hidden могут быть видны, если для них явно установлено visibility:visible.

`visibility`
Значения:	`visible` \| `hidden` \| `inherit`
По умолчанию:	`visible`
Область применения:	все элементы
Наследование:	да

P.two { visibility:
              }

Это первый абзац.

Это второй абзац.

Это третий абзац.

  
<BODY>
  <P>Первый абзац.
  <P class="two">Второй абзац.
  <P>Третий абзац.
</BODY>

Изменение представления элемента

Свойство display позволяет влиять на способ представления элемента.

Элемент, для которого задано display:none, удаляется из документа (вместе со своими потомками).

Значение inline предписывает элементу строчное поведение.

Значение block предписывает элементу блочное поведение.

Значение list-item превращает элемент в пункт списка. Это значение не поддерживает браузер IE (как и другие значения, которые здесь не упомянуты).

`display`
Значения:	`none` \| `inline` \| `block` \| `list-item` \| `inherit`
По умолчанию:	`inline`
Область применения:	все элементы
Наследование:	нет

Отметим, что изменение ролей не меняет тип элемента, меняет только его представление на экране. В частности, по-прежнему блочные элементы не могут быть потомками строчных, даже при изменении их ролей свойством display.

UL LI { display:
              }

Это абзац перед списком.

Первый
Второй
Третий

Это абзац после списка.

  
<BODY>
  <P>Это абзац перед списком.
  <UL>
    <LI>Первый
    <LI>Второй
    <LI>Третий
  </UL>
  <P>Это абзац после списка.
</BODY>