1.div嵌套的情况：
如下代码：
<body>
<div class="d1">
<div class="d2" >
</div>
<div class="d3">
</div>
</div>
</body>
以上代码中d1嵌套了d2,d3,
css 代码如下：
<style>
.d1{
width: 500px;
height: 500px;
background: red;
}
.d2{
width: 100px;
height: 100px;
background: blue;
}
.d3{
width: 100px;
height: 100px;
background: yellow;
}
.d1>div{
position: absolute;
top:0px;
left:0px;
}
这时参照的的是window的绝对原点，所以黄色的div会顶出他的父div，如图：
如果需要按照d1的div坐标走，必须设置d1 的position：relative；这样子视图会参照d1（红色）的div，移动：
代码如下：
<style>
.d1{
width: 500px;
height: 500px;
background: red;
position: relative;
}
.d2{
width: 100px;
height: 100px;
background: blue;
}
.d3{
width: 100px;
height: 100px;
background: yellow;
}
.d1>div{
position: absolute;
top:0px;
left:0px;
}
</style>
如图：
黄色和蓝色都叠加在一起了，是因为，absolute，不占文档字节流，蓝色div钻到了黄色的低下。
<style>
.d1{
width: 500px;
height: 500px;
background: red;
position: absolute;
}
.d2{
width: 100px;
height: 100px;
background: blue;
}
.d3{
width: 100px;
height: 100px;
background: yellow;
}
.d1>div{
margin-top:35px;
}
2.div元素中， margin-top:35px;;如果其本身或者父元素不设float，或者position：absolute将移动父亲的div，即整个div移动。
扫一扫
1812
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
