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

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