Сделайте два прозрачных изображения перекрывающимися, используя CSS - PullRequest
Новая
       38

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

4 голосов
/ 04 апреля 2010

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

<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.

Ответы [ 3 ]

6 голосов
/ 04 апреля 2010

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

1 голос
/ 04 апреля 2010

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

0 голосов
/ 04 апреля 2010

Просто примечание:

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 родительского элемента, независимо от естественного потока - напр. (в псевдо html / css): 

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

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

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

-A

...