Z-index

Русский перевод: Z-index

Властивість Z-index описує рівень стека подання елемента на сторінці щодо елементів, які залишилися в потоці. Його значенням є число. Разом зі збільшенням z-index елемента, близькість до користувача також збільшується.

Приклад коду

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
.logo {
position:absolute;
font-family:Century;
font-size:2em;
font-weight:bold;
z-index:20;
}
#logo1 {
left:50px;
top:50px;
color:#00f;
}
#logo2 {
left:52px;
top:52px;
color:#f00;
z-index:10;
}
.box {
position:absolute;
height:100px;
width:100px;
border:15px solid #000;
}
#box1 {
left:150px;
top:150px;
border-color:#f00;
z-index:40;
}
#box2 {
left:185px;
top:185px;
border-color:#00f;
z-index:30;
}
#box3 {
left:185px;
top:150px;
border-color:#060;
z-index:20;
}
#box4 {
left:150px;
top:185px;
border-color:#f60;
z-index:10;
}
</style>
<title>CSS Z-Index</title>
</head>
<body>
<h1>CSS Z-Index</h1>
<div id="logo1" class="logo">Webucator</div>
<div id="logo2" class="logo">Webucator</div>
<div id="box1" class="box"></div>
<div id="box2" class="box"></div>
<div id="box3" class="box"></div>
<div id="box4" class="box"></div>
</body>
</html>

Зверніть увагу, як певні елементи div розташовані поверх інших. Якщо z-index цих елементів змінюється, розташування їх стека зміниться також.

Display

Властивість display застосовується для встановлення, чи повинен елемент з’явитися на сторінці чи ні. Найпопулярнішими значеннями для цього елемента є наступні:

  • block
  • inline
  • none

Найбільш типові приклади застосування властивості display:

  1. Для показу і приховування елементів залежно від взаємодії з користувачем. Частий приклад – це спадаюче меню. Такі динамічні зміни стилів представлені значеннями javascript.
  2. Щоб приховати елементи для певних типів медіа. Наприклад, можна “відключити” показ картинок, просто вказавши значення none для властивості display в таблиці стилів, яка використовується для друку документа
  3. Конвертація інлайнових елементів, таких як link, в блокові елементи за допомогою зміни значення властивості display на block

Приклад нижче демонструє, як властивість display може застосовуватися для зміни посилань на елементи block.

Приклад коду

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS Link Buttons</title>
<style type="text/css">
a {
display:block;
padding: 6px 4px;
margin: 4px;
border-right: 2px solid #999999;
border-bottom: 2px solid #999999;
border-top-width: 0px;
border-left-width: 0px;
background-color: #eaf1dd;
color:#060;
text-decoration:none;
font-family:Verdana, Geneva, sans-serif;
font-size:1.5em;
}
</style>
</head>
<body>
<h1>Button Links</h1>
<div>
<a href="http://www.washingtonpost.com">WashingtonPost.com</a>
<a href="http://www.webucator.com">Webucator</a>
<a href="http://www.google.com">Google</a>
</div>
</body>
</html>

Visibility (Видимість)

Властивість visibility застосовується, коли ви хочете впливати на видимість елемента. Можливі значення цієї властивості:

  • visible
  • hidden

Найголовніша відмінність між visibility і hidden елемента полягає в тому, що якщо вказано значення hidden, то прихований елемент, як і раніше може впливати на розкладку вашої сторінки. Елементи, у яких властивість display має значення none, такого ефекту не мають.