Z-index | CSS для Чайников

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

Пример кода

01	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

02	<html xmlns="http://www.w3.org/1999/xhtml">

<head>

04	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

05	<style type="text/css">

.logo

07	position:absolute;

08	font-family:Century;

09	font-size:2em;

10	font-weight:bold;

11	z-index:20;

#logo1

14	left:50px;

top:50px;

16	color:#00f;

#logo2

19	left:52px;

top:52px;

21	color:#f00;

22	z-index:10;

.box

25	position:absolute;

26	height:100px;

27	width:100px;

28	border:15px solid #000;

#box1

31	left:150px;

32	top:150px;

33	border-color:#f00;

34	z-index:40;

#box2

37	left:185px;

38	top:185px;

39	border-color:#00f;

40	z-index:30;

#box3

43	left:185px;

44	top:150px;

45	border-color:#060;

46	z-index:20;

#box4

49	left:150px;

50	top:185px;

51	border-color:#f60;

52	z-index:10;

</style>

55	<title>CSS Z-Index</title>

</head>

<body>

58	<h1>CSS Z-Index</h1>

59	<div id="logo1" class="logo">Webucator</div>

60	<div id="logo2" class="logo">Webucator</div>

61	<div id="box1" class="box"></div>

62	<div id="box2" class="box"></div>

63	<div id="box3" class="box"></div>

64	<div id="box4" class="box"></div>

</body>

</html>

Обратите внимание, как определенные элементы div расположены поверх других. Если z-index этих элементов изменяется, расположение их стека изменится также.

Display

Свойство display применяется для установки, должен ли элемент появиться на странице или нет. Самыми популярными значениями для этого элемента являются следующие:

block
inline
none

Наиболее типичные примеры применения свойства display:

Для показа и сокрытия элементов в зависимости от взаимодействия с пользователем. Частый пример – это ниспадающее меню. Такие динамические изменения стилей представлены значениями javascript.
Чтобы скрыть элементы для определенных типов медиа. Например, можно «отключить» показ картинок, просто указав значение none для свойства display в таблице стилей, которая используется для печати документа
Конвертация инлайновых элементов, таких как link, в блочные элементы при помощи изменения значения свойства display на block

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

Пример кода

01	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

02	<html xmlns="http://www.w3.org/1999/xhtml">

<head>

04	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

05	<title>CSS Link Buttons</title>

06	<style type="text/css">

08	display:block;

09	padding: 6px 4px;

10	margin: 4px;

11	border-right: 2px solid #999999;

12	border-bottom: 2px solid #999999;

13	border-top-width: 0px;

14	border-left-width: 0px;

15	background-color: #eaf1dd;

16	color:#060;

17	text-decoration:none;

18	font-family:Verdana, Geneva, sans-serif;

19	font-size:1.5em;

</style>

</head>

<body>

24	<h1>Button Links</h1>

<div>

26	<a href="http://www.washingtonpost.com">WashingtonPost.com</a>

27	<a href="http://www.webucator.com">Webucator</a>

28	<a href="http://www.google.com">Google</a>

</div>

</body>

</html>

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

Свойство visibility применяется, когда вы хотите воздействовать на видимость элемента. Возможные значения этого свойства:

visible
hidden

Самое главное различие между visibility и hidden элемента состоит в том, что если указано значение hidden, то скрытый элемент по прежнему может влиять на раскладку вашей страницы. Элементы, у которых свойство display имеет значение none, такого эффекта не имеют.