Наложение объектов на экране

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

Если задано абсолютное положение, то атрибуты left и top задают отступы от левого верхнего угла документа.

Объекты с абсолютным положением показываются поверх всех других объектов страницы. Если есть несколько объектов с абсолютным положением, то они накладываются друг на друга по мере появления их описания в тексте (похоже на образование нескольких слоев документа).

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

В IE 5.x при относительном расположении объект может быть реально перемещен на другое место – с помощью атрибутов left и top. Но то место, где он был бы без задания атрибутов left и top остается не занятым (т.е. пустым)! Обратите внимание на то, что при отступах, задаваемых margin-top и margin-left, место не пропадает!

Рассмотрим следующую задачу: в документе четыре блоковых объекта расположить друг на друге, так что видимым остается только некоторый нижний фрагмент, по щелчку на который видимым становится соответствующий блок.

div {width:200; height:200; font-size:24; border:solid #ffaa77 4;padding:7}

div.d1 {background-color: #FC0 }

div.d2 {background-color: #CF0 }

div.d3 {background-color: #0FC }

div.d4 {background-color: #0CF }

</style>

</script>

</head>

<body>

<div class="d1" style="z-index:0;" onclick="this.style.zIndex=0"> Листва всё суше, тоньше,зряшней. А небо лишь слегка поблёкло.</div>

<div class="d2" style="z-index:-1;position:relative; margin-left:50;margin-top:-180" onclick="this.style.zIndex=0">И свет за окнами прозрачный, как будто стали тоньше стекла.</div>

<div class="d3" style="z-index:-2;position:relative; margin-left:100;margin-top:-160" onclick="this.style.zIndex=0">И в доме гулко, зябко, пусто. И звук любой продолжен эхом.</div>

<div class="d4" style="z-index:-3;position:relative; margin-left:150;margin-top:-140" onclick="this.style.zIndex=0">А на душе такое чувство, как-будто близкий кто уехал... </div>

Обратите внимание на следующие особенности: заданы общие характеристики стиля для всех блоков, а особенные заданы в классах или непосредственно в теге. В стиле для div используется обобщенные имена атрибутов: border и padding.

Дата добавления: 2016-04-19; просмотров: 513;