Я хотел бы создать парадоксальный эффект с помощью свойства z-index
CSS.
В моем коде у меня есть пять кругов, как на изображении ниже, и все они абсолютно расположены без определенного z-index
. Поэтому по умолчанию каждый круг перекрывает предыдущий.
Прямо сейчас, круг 5 перекрывает круг 1 (левое изображение). Парадокс, который я хотел бы достичь, состоит в том, чтобы в то же время окружить 1 под кружком 2 и над кругом 5 (как в правильном изображении).
http://paradox.schramek.cz/1.jpg
Здесь мой код
Разметка:
<div class="item i1">1</div>
<div class="item i2">2</div>
<div class="item i3">3</div>
<div class="item i4">4</div>
<div class="item i5">5</div>
CSS
.item {
width: 50px;
height: 50px;
line-height: 50px;
border: 1px solid red;
background: silver;
border-radius: 50%;
text-align: center;
}
.i1 { position: absolute; top: 30px; left: 0px; }
.i2 { position: absolute; top: 0px; left: 35px; }
.i3 { position: absolute; top: 30px; left: 65px; }
.i4 { position: absolute; top: 70px; left: 50px; }
.i5 { position: absolute; top: 70px; left: 15px; }
Живой пример также доступен в http://jsfiddle.net/Kx2k5/.
Я пробовал много методов со штабелями, стекированием и т.д. Я прочитал некоторые статьи об этих методах, но не успел. Как я могу это решить?