UC知道请问关于position：relative里设置margin等不受控制的问题？
来源：百度知道 编辑：UC知道 时间：2024/05/21 18:40:11
想要实现CSS中设置的显示效果，但是F12确得不到想要的效果，请高手指点！
<style type="text/css">
<!--
#apDiv1 {
position:absolute;
left:317px;
top:97px;
width:239px;
height:162px;
z-index:1;
background-color:#0000FF;
border:0px;
}
#apDiv2 {
position:relative;
margin-left:0px;
margin-bottom:0px;
width:179px;
height:101px;
z-index:2;
background-color:#FF9900;
border:0px;
}
#apDiv3 {
position:relative;
margin-top:0px;
margin-right:0px;
width:105px;
height:43px;
z-index:3;
background-color:#99FF66;
border:0px;
}
-->
</style>
<body>
<div id="apDiv1"><div id="apDiv2"><div id="apDiv3">上</div>中</div>下</div>
</body>
<style type="text/css">
<!--
#apDiv1 {
position:absolute;
left:317px;
top:97px;
width:239px;
height:162px;
z-index:1;
background-color:#0000FF;
border:0px;
}
#apDiv2 {
position:relative;
margin-left:0px;
margin-bottom:0px;
width:179px;
height:101px;
z-index:2;
background-color:#FF9900;
border:0px;
}
#apDiv3 {
position:relative;
margin-top:0px;
margin-right:0px;
width:105px;
height:43px;
z-index:3;
background-color:#99FF66;
border:0px;
}
-->
</style>
<body>
<div id="apDiv1"><div id="apDiv2"><div id="apDiv3">上</div>中</div>下</div>
</body>
一楼说的甚是
我简单补充一下吧，position:absolute 这种绝对定位你可以理解为是根据显示器的位置进行定位。top,bottom……四个参数像坐标一样。
也就是说无论你网页变大还是缩小，它所在的位置不会因此而改变。Margin的理解你得去看一下盒模型，看过后你应该就明白为什么它的值在绝对定位中无效。
你也可以简单理解为margin是相对值，是值所在的元素和其它元素之间的距离
看来 position 你没弄清楚。看看参考资料。