1.定位中的absoulate和relative定位会不会脱离文档流
1.1 relative
<style>
.box{
width:400px;
height:200px;
margin:100px auto;
border:1px solid #de0000;
}
.item{
position:relative;
top:0px;
left:0px;
width:100px;
height:100px;
background:blue;
float: left;
}
.item1{
width:100px;
height:100px;
background:green;
float: left;
}
</style>
</head>
<body>
<div class="box">
<div class="item"></div>
<div class="item1"></div>
</div>
</body>
如图1:relative并不能脱离文档流
1.2 absoulate
<style>
.box{
width:400px;
height:200px;
margin:100px auto;
border:1px solid #de0000;
}
.item{
position:absolute;
top:0px;
left:0px;
width:100px;
height:100px;
background:blue;
float: left;
}
.item1{
width:100px;
height:100px;
background:green;
float: left;
}
</style>
</head>
<body>
<div class="box">
<div class="item"></div>
<div class="item1"></div>
</div>
</body>
如图2:absoulate脱离文档流