css实现两个div重叠,为什么 left:20px; top:20px显示的不是这么多

运行试下,为什么显示的车设置的不对,,,请懂的帮忙看看
<div style="position:relative; width:800px; height:600px; z-index:1;">
<A target="_blank" title=可牛QQ href="/">
<IMG height=600 src="1.jpg" width=800 border=0>
</A>
<div style="position:absolute; left:20px; top:20px; width:100px; height:400px; z-index:2">
<IMG height=50 src="2.jpg" width=150 border=0>
</div>
</div>

没太搞懂你问的具体含义，我就猜一猜一般人经常碰到的问题好了
你设一下body{margin:0;padding:0;}
每次写样式都记得设置一下
一般情况，如果你确认样式没写错，而间隙空的又比设置的多了，那么你就首先考虑设一下margin:0;padding:0;来解决一下，如果不能解决再考虑其他问题追问

哦,可能是这个的问题,,,,

我的意思是说,left:20px; top:20px,,,,这里不是20吗,,,可是实际显示不是我么多,小了2PX

------------------------------------
刚试了,不是的呼,,,,实际显示的是left:16px; top:20px

追答

不知道你为什么这么嵌套div，2个div都设了z-index:属性，只要设一个就够了
内部设的position:absolute;的div的位置是相对于外层那个设了position:relative;的div而言的
我不清楚你内部这个div是要要距离哪个层来设位置偏移，所以问题也不太好判断
给你一个提醒，布局的时候尽量别用或者少用position:属性，这个一般主要用于一些特殊层或者模块使用的，例如弹出框，或者是常用于一些特殊布局使用，例如不规则图形布局，控制位置你最好是使用外边距margin:和内边距padding:
举例：如果是嵌套div关系，那么可以这么设置

或者是

温馨提示：内容为网友见解，仅供参考

当前网址：https://11.t2y.org/zz/s27p28s44.html