Наслоение картинок (колода карт)

[horpah]

Все хоть раз видели как рисуется колода карт: карта первая, из под нее виден краешек второй, из под 2-й - 3-я....
Можно ли как-то средствами CSS (без программного кода) наслоить картинки друг на друга таким же образом, чтобы одна картинка наезжала на другую допустим на 20px??? Смещение "колоды" (по вертикали или горизонтали) значения не имеет. Здесь еще важен такой момент. Сейчас на стороне сервера рассчитывается top(left) для каждой картинки, что в купе с position:absolute дает нужный эффект, но хочу избавится вообще от всяких рассчетов как на стороне сервера, так и на стороне клиента(JS)
Количество картинок (от 1 до 7).
Если возможен такой вариант, подскажите пожалуйста.

 

[Kub]

В CSS укажите top(left) и затем z-index от 1 до 7 в том порядке в каком хотите их наслаивать друг на друга.

 

[horpah]

Порядок впринципе произвольный. Сейчас PHP выводит так:

foreach($pics as $i=>$pic)
{
  <div class="tpic{$i}"><img//// /></div>
  или
  <div class="lpic{$i}"><img//// /></div>
}

Ну и соответственно 7 классов .tpic0 - .tpic6 для вертикального и
7 классов .lpic0 - .lpic6 для горизонтальноо наслоений
в которых просто top(left) отличаются на ширину(длину) картинки(40 пикс.) минус степень нахлеста (10прикс) Примерно так
position: absolute для всех, а дальше
.top0{top: 0px;}
.top1{top: 40-10=30px;}
.top2{top: 30+40-10=60px;}
.top3{top: 60+40-10=90px;}
.....
Т.е. это все через программный код + фикс. высота. Браузеру ведь как-то не нужно указывать, top для <div>'а, который идет за другим <div>'ом, он ее сам рассчитает основываясь на top+height+margin вышестоящих блоков. Так и здесь, нужно чтобы картинки шли одна под одной (как в обычно дивы без маргинов), только чуток нижестоящая наезжала на вышестоящую.

 

[bork75]

Чтобы position:absolute было комфортно использовать веди отсчёт от блока relative, просто задаёшь ему координаты "0" и вставляешь как обычный div в любое место, а position:absolute будет уже внутри рассчитываться.

<div style="position: relative; top: 0px; left: 0px;">
    <div style="position: absolute; top: 0px; left: 0px; z-index: 1">
    карта 1
    </div>
    
    <div style="position: absolute; top: 0px; left: 5px; z-index: 2">
    карта 2
    </div>   
</div>

 

[horpah]

Это все пронятно про relative. Суть в том чтобы не использовать значения ТОП/ЛЕФТ, для нижестоящей/правостоящей картинки.
Пример:
<div></div>
<div></div>
.......
<div></div>
Блоки будут идти аккуратно 3-й под 2-ым, 2-й под 1-ым с отступами определяемыми margin. Им не надо задавать ТОП, браузер сам рассчитывает местоположение нижестоящего, ориентируясь по вышестоящему и margin. Примерно этого и я хочу добиться, только чтобы нижестоящий чуть чуть наезжал на вышестоящий. А программно считать их, и каждому давать свой ТОП или класс - так это уже реализовано, эффект нужный есть. Если есть возможность - хочу без программного участия их так разместить (в т.ч. и участия JS).

 

[bork75]

Единственные ещё вариант, это сделать таблицу и каждой ячейки присвоить фон нужной карты, ячейки сделать короче и визуально, карты будут накладываться друг на друга

<table border="0" cellpadding="0" cellspacing="0" width="18%" id="table1" height="202">
	<tr>
		<td>фон карты1</td>
		<td>фон карты2</td>
		<td>фон карты3</td>
	</tr>
</table>

По другому, без позиционирования через css или JS и т.п. этого невозможно добиться.

 

[gruz222]

можно сделать так

<div id="cards">
<span><img src="" />
<span><img src="" />
<span><img src="" /></span></span></span>
</div>

а в css

#cards span{
display:block;
float:left;
padding: 40px 0 0 40px; /* отступ от ячейки картинки */
}

#cards span img {
position: relative;
top:-20px;
left:-20px;
}

типа такого,
набросал на скорую руку, но должно работать

 

[horpah]

Всем спасибо кто пытался помочь. Задачу выполнил так:
<div class"statusblock(t/l)">
<div><img ..../></div>
<div><img ..../></div>
.....
<div><img ..../></div>
</div>
.statusblockt div{ //для вертикального
margin-top: -15px;
}
.statusblockl{ //для горизонтального
margin-left: -15px;
}
Странно получилось, ведь это было первым решением, но хитрый огненный лис странно закешировал именно маргин этого блока, так как измененный цвет бекграунда он подхватил на раз. ))