Основы работы с XHTML и CSS


Разбиение элементов по слоям


Элементы страницы при добавлении на страницу Web накладываются друг на друга слоями, то есть, каждый следующий кодируемый элемент содержится в слое, который располагается поверх предыдущих элементов. Как правило, это разделение на слои не очевидно и его не требуется знать, так как элементы страницы обычно не перекрываются. Однако когда элементы явно позиционируются на странице, они могут перекрываться, делая разбиение на слои очевидным. Также может понадобиться изменить используемое по умолчанию разбиение на слои, чтобы элементы были представлены в требуемом порядке наложения.

Можно явно изменить используемое по умолчанию разбиение элементов страницы на слои, кодируя их свойство стиля z-index. Значение z-index является относительной величиной. Элементы с большими числовыми значениями появятся поверх элементов с меньшими значениями. Так, элемент с z-index:2 появится поверх элемента с z-index:1, элемент с z-index:20 появится поверх элемента с z-index:10. Абсолютное значение z-index не имеет значения. Важны только относительные величины z-index, присвоенные множеству разбитых по слоям элементов.

Цветные квадраты, показанные на рисунке 6.17, демонстрируют различные позиции и слои. В этом случае распределение по слоям задается исключительно порядком по умолчанию, в котором квадраты были закодированы: закодированные последними появляются поверх кодированных ранее.

<style type="text/css"> .RED {position:relative; width:100px; height:100px; left:0px; top:0px; background-color:red; border:solid 1px white; color:white; text-align:right} .GREEN {position:relative; width:100px; height:100px; left:-50px; top:25px; background-color:green; border:solid 1px white; color:white; text-align:right} .BLUE {position:relative; width:100px; height:100px; left:-100px; top:50px; background-color:blue; border:solid 1px white; color:white; text-align:right} </style>

<div> <span class="RED">Red</span> <span class="GREEN">Green</span> <span class="BLUE">Blue</span> </div>




Начало  Назад  Вперед