DIV相对于父DIV绝对定位?

Question

<div style="height:158px; width:158px;">
Test001
<div style="height:158px; width:158px; filter: alpha(opacity=45); opacity:0.45;">
Test002<br/>
</div>
</div>

父DIV和子DIV的大小相同

本来两个DIV应该是重叠在一起的
可是由于在父DIV中还有其他内容“Test001”
导致子DIV向下移动了

想要实现的效果就是父DIV和子DIV完全重叠在一起
子DIV因为是透明的
于是父DIV和子DIV的文字都能显示出来
两个文字交叠在一起的感觉

我想知道
这么才能让子DIV不移动
即使父DIV中有其他内容
也能始终和父DIV完全重合

Answer 1

父DIV设置为相对定位，子DIV设置为绝对定位。<div style="height:158px; width:158px; position:relative;">Test001<div style="height:158px; width:158px; filter: alpha(opacity=45); opacity:0.45; position:absolute; left:0; top:0;">Test002<br/></div></div>父级的相对定位：是要把子DIV的绝对定位的起点以父DIV左上角为起点，如果没有就默认屏幕左上角了。子DIV的绝对定位：是无视父DIV下别的元素。然后就是left:0; top:0; 这个是用来定位的希望对你有帮助

Answer 2

你这样写试一下：<div style="height:158px; width:158px; position:relative; background:#FF0000;">Test001<div style="height:158px; width:158px; position: absolute; top:0px; background:#000000;filter: alpha(opacity=45); opacity:0.45;">Test002<br/></div></div>