CSS. Наслоение элементов.

     Для наслоения элементов в CSS применяется свойство z-index. Тут все просто, необходимо присвоить каждому элементу номер z-index, и элемент с большим номером будет накладываться (перекрывать) элемент с меньшим номером.

Пример:

<html>
  <head>
    <title>Слои</title>
    <style type="text/css">
.box1 {
position:absolute;
left: 100px;
top: 100px;
z-index: 1;
}
.box2 {
position:absolute;
left: 120px;
top: 120px;
z-index: 2;
}
.box3 {
position:absolute;
left: 140px;
top: 140px;
z-index: 3;
}
    </style>
  </head>
<body>
   <h4>Слои</h4>  
<div class="box1">
<img src="images/dwar_240x400_trusishka.jpg" style="width:85px;height:72px;">
</div> 
<div class="box2">
<img src="images/dwar_240x400_trusishka.jpg" style="width:85px;height:72px;">
</div>
</div> 
<div class="box3">
<img src="images/dwar_240x400_trusishka.jpg" style="width:85px;height:72px;">
</div> 
   </body>
</html>
 

Результат: (открыть в браузере)

 
Загрузка...