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

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

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

Порядок наложения блоков. z-index.

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

Порядок перекрытия блоков (слоев в терминах Netscape) определяется признаком z-index. Чем огромнее значение 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 поддерживается как безусловное позиционирование, так и относительное.