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>
</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
Найпоширеніші приклади:
- Показ та приховування елементів залежно від взаємодії користувача (наприклад, спадаюче меню через JavaScript).
- Приховування елементів для певних медіа (наприклад, для друку).
- Перетворення інлайнових елементів на блокові через
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 та display: none полягає в тому, що елемент із hidden все ще впливає на розкладку сторінки, тоді як елемент із display: none — ні.