定位position属性float、absolute、relative_综合

float：包裹性、破坏性、脱离文档流

包裹性和破坏性即为display=inline-block，块级元素用的话及失去块级元素的特性（下同）
会影响行内元素的位置，不占据块级元素的位置
行内元素与浮动元素重叠，行内元素的边框，背景和内容都会显示在浮动元素之上
块级元素与浮动元素重叠，块级元素的边框，背景会显示在浮动之下，内容在浮动之上
清除浮动：clear只对本身的布局起作用，如下代码所示

<style>.float{float:left;width:100px;height:30px;background:red;margin-left: 5px;}.cl{clear:right;}
</style>
<body><div class='box'><div class='float cl'>1111</div><div class='float'>1111</div><div class='float'>1111</div></div>
</body>

这里写图片描述

<style>.float{float:left;width:100px;height:30px;background:red;margin-left: 5px;}.cl{clear:right;}
</style>
<body><div class='box'><div class='float'>1111</div><div class='floa clt'>1111</div><div class='float'>1111</div></div>
</body>

这里写图片描述

absolute：包裹性、破坏性、脱离文档流

<style>
*{margin:0;padding:0;
}
.contain{
top:100px;
left:50%;
background:red;
position:absolute;
}
</style>
<body><div class='contain'><img src='img/1.png' width='200' height='200'><p>包裹性</p></div></body>

这里写图片描述

<style>
*{margin:0;padding:0;
}
.contain{
text-align: center;
background:red;}
img{position: absolute;left:10px;
}
</style>
<body><div class='contain'><img src='img/1.png' width='200' height='200'><p>破坏性、脱离文档流</p></div></body>

这里写图片描述

要激活对象中absolute定位，必须有left、right、bottom、left中至少一个，否者都会默认为auto。（LRBT属性要在position下才有效果）

p{width:100px;height:100px;left:20px;//无定位positionbackground: blue;
}
</style>
<body><div><p></p></div>
</body>

这里写图片描述

若当对象设定了absolute，如果父级（无上限）没有设定position属性，那么对象以浏览器的左上角为原点定位。父级（最近）设有position属性，则以父级（最近）的左上角为原点进行定位

<style>
*{margin:0;padding:0;
}
div{background: red;width:200px;height:200px;
}
.one{margin:10px 0 0 10px;
}
.two{margin:20px 0 0 20px;background: black;position:absolute;
}
.three{margin:30px 0 0 30px;background: green;
}
p{width:100px;height:100px;left:5px;background: blue;position:absolute;
}
</style>
<body><div class='one'><div class='two'>//设有position，以他左上角为原点<div class='three'><p></p></div></div></div>
</body>

这里写图片描述

<style>
*{margin:0;padding:0;
}
div{background: red;width:200px;height:200px;
}
.one{margin:10px 0 0 10px;
}
.two{margin:20px 0 0 20px;background: black;position:absolute;
}
.three{margin:30px 0 0 30px;background: green;
}
p{width:100px;height:100px;/*left:5px;*/background: blue;position:absolute;
}
</style>
<body><div class='one'><div class='two'><div class='three'><p>没有设置TRBL值</p></div></div></div>
</body>

这里写图片描述

<style>
*{margin:0;padding:0;
}
div{background: red;width:200px;height:200px;
}
.one{margin:10px 0 0 10px;
}
.two{margin:20px 0 0 20px;background: black;
}
.three{margin:30px 0 0 30px;background: green;
}
p{width:100px;height:100px;left:5px;top:5px;background: blue;position:absolute;
}
</style>
<body><div class='one'><div class='two'><div class='three'><p>没有父级设置position属性，则以浏览器为原点</p></div></div></div>
</body>

这里写图片描述

绝对定位的对象在可视区之外会导致滚动条的出现

<style>
*{margin:0;padding:0;
}
p{width:100px;height:100px;right:-30px;background: blue;position:absolute;
}
</style>
<body><div class='one'><div class='two'><div class='three'><p>超出可视区，出现滚动条</p></div></div></div>
</bod

这里写图片描述

relative：不脱离文档流、对前一个元素定位（相当于对自身原来位置进行偏移）

<style>
*{margin:0;padding:0;
}
p{width:100px;height:100px;
}
.one{background: yellow;position:relative;top:120px;
}
.two{background: red;
}
</style>
<body><p class='one'><b>对象依旧占据原来空间，移动会覆盖其他元素</b></p><p class='two'></p>
</body>

这里写图片描述

总结：
一般来讲，网页一直随着分辨率的大小自适应，absolute会有以浏览器左上角为原点进行定位，不会跟着分辨率变化而变化位置。设置relative的话，可以保持对象在文档流中，它的位置根据它的前一个对象进行偏移。所以，能不用absolute尽量不用！