Question

我正在尝试使两个透明图像（具有相同的尺寸/尺寸）在其左上角的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内连接。

Answer 1

尝试让#main拥有position:relative，然后将两个<img>更改为使用position:absolute。

Answer 2

制作第二张图片position:absolute和#main position:relative

Answer 3

请注意：

position:relative和position:absolute是指最近父母的0;0，其中包含position:relative或position:absolute。如果您的div没有，那么它会引用文档0;0）的body（顶部;左侧）。

position:relative - top和left指的是元素的自然流量值之间的差异 - 即，如果“image”具有自然流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>

图像将比父div左上角的右侧高20px和150px。

也就是说，您希望您的容器相对和绝对，并且您的两个堆叠图像都应position:relative top: 0; left: 0;。如果您想要更好地控制分层，请不要忘记设置z-index。

-A

使用CSS重叠两个透明图像

3 个答案: