Порядок наложения и область видимости

Абсолютное и относительное позиционирование блоков позволяют придать странице третье измерение. Координаты блока, а точнее левого верхнего угла прямоугольника блока, и его линейные размеры определяют место положение блока на плоскости. Так как блок не является абстрактной точкой, то прямоугольники блоков перекрываются. Перекрываются они в определенном порядке, что позволяет говорить об их размещении в пространстве. Порядок наложения (перекрытия) блоков определяется атрибутом z-index.

Вообще говоря, при позиционировании блоков и их наложении друг на друга возникают видимые и невидимые области блоков. CSS позволяет произвольно управлять видимостью прямоугольной части блока. За это в спецификации CSS-P отвечает атрибут clip.

Порядок наложения блоков. z-index.
Если быть более точным, то блоки - это прямоугольные карточки, которые лежат на поверхности, перекрывая друг друга. Расстояние между ними задать нельзя, т.е. полноценного третьего измерения нет:

Порядок перекрытия блоков (слоев в терминах Netscape) определяется атрибутом z-index. Чем больше значение z-index, тем ближе к наблюдателю находится слой:

При работе с этим атрибутом следует иметь в виду, что NN и IE применяют разные модели описания "слойки". В IE - это просто числовой параметр, который закреплен за блоком и не влияет на значения этого параметра у других блоков. В NN изменение параметра z-index одного блока влиет на значения этого параметра у других блоков. Они, словно карточки на столе, перекладываются и принимают новую нумерацию.

Область видимости блока. clip.
Соверешенно необязательно показывать весь блок целиком. Можно показать только часть блока. Управляется такое отображение параметром clip описания CSS. В приведенном ниже примере мы просто обрезали карточку голубого цвета.

<div "position:relative;top:0;left:0;
width:269; height:150;
clip:rect(20,260,100,20);">
...
</div>

При вырезании области видимости в IE следует учитывать, что работает clip только при абсолютном позиционировании. В NN поддерживается как абсолютное позиционирование, так и относительное.

<<< - Предыдущая | Cледующая ->>>