Сделайте два прозрачных изображения совпадающими с помощью CSS

Я пытаюсь сделать два прозрачных изображения (имеющих одинаковый размер/размер) перекрытием в пределах div в верхних левых углах. Я пробовал:Сделайте два прозрачных изображения совпадающими с помощью CSS

<html xmlns="http://www.w3.org/1999/xhtml"> 
<body> 
<div style="margin:20px;"> 
<div id="main" style="overflow:hidden;background-color:red;width:400px;height:400px;border:3px solid blue;"> 
<img src="myimage1.png" style="position:relative;top:0px;left:0px;z-index:0;"/> 
<img src="myimage2.png" style="position:relative;top:0px;left:0px;z-index:10;"/> 
</div> 
</div> 
</body> 
</html>

Но это не работает. Вместо этого две фотографии объединены внутри родителя div.

источник

2010-04-04 Pierre

Постарайтесь, чтобы #main получили position:relative, а затем изменили два <img>, чтобы использовать position:absolute.

источник

2010-04-04 16:13:49 kennytm

бить меня к нему - вот живой пример http://jsbin.com/unogu3/ (I смещение изображения, чтобы показать, что они перекрываются - очевидно, ваш будет немного отличаться) –

сделать второе изображение position:absolute и #main position:relative

источник

2010-04-04 16:14:50 carillonator

Просто к сведению:

position:relative и position:absolute сослаться на 0;0 из ближайшего родителя, который имеет position:relative или position:absolute. Если ни один из ваших div s не имеет, то он ссылается на 0;0 (вверху слева) документа (body).

position:relative - сверху и слева относятся к разнице между естественным значением потока элемента - то есть, если «образ» имеет естественный поток x 1500 и y 1200, top: 150px; left: -50px; будет переместить его в x: 1450; y: 1350;

position:absolute - верхний и левый выровнены против 0;0 ближайшего p:r или p:a родительский элемент, независимо от естественного потока - ex. (В псевдо HTML/CSS):

<div style="relative/absolute"> 
    <img absolute="top:-20px; left: 150px;"> 
</div>

Изображение будет 20px выше и 150px справа от левого верхнего угла родительского DIV.

Это означает, что вы хотите, чтобы ваш контейнер был как относительным, так и абсолютным, и оба ваших штабелированных изображения должны быть position:relative с top: 0; left: 0;. Не забудьте установить z-index, если вы хотите лучше контролировать слоирование.

-A

источник

2010-04-04 16:20:59

Сделайте два прозрачных изображения совпадающими с помощью CSS

ответ

Смежные вопросы