4

我正在尝试使两个透明图像（具有相同的大小/尺寸）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>

但这不起作用。相反，两张图片在 parent 中连接div。

4

3 回答 3

6

尝试使#main有position:relative，然后改变两者<img>的使用position:absolute。

于 2010-04-04T16:13:49.687 回答
1

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

于 2010-04-04T16:14:50.417 回答
0

只是一个说明：

position:relative并position:absolute参考0;0最近的父母，其中有position:relative或position:absolute。如果您div的 s 都没有，那么它指0;0的是文档 ( ) 的 (top;left body)。

position:relative- 顶部和左侧是指元素的自然流量值之间的差异 - 即如果“图像”具有自然流量x1500 和y1200，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 的左上角向右高出 20 像素和 150 像素。

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

-一种

于 2010-04-04T16:20:59.667 回答