对CSS中的Position、Float属性的一些深入探讨

2020-05-06 09:08:53易采站长站整理

左图中的div是没有设置top、left值的,而右边则设置了50px的偏移。

2)元素同时应用了position: absolute及float属性,则float失效。

<div style="position: absolute; right:10px; top: 10px; float: left;">我是一个应用了position:absolute和float:left的DIV,不过我还是在浏览器的右边,没有浮动到左边。</div>


3)第一个元素应用了position之后会覆盖着接下来的float元素(如果两个元素所处的位置相同)

<div style="position: absolute; left:10px; top: 10px;"> 我是一个应用了position:absolute的DIV。</div><div style="float:left; background: red; width: 300px; height: 150px; "> 我是float:left的DIV</div>

回顾:如果你不将float的元素的position设置成relative的话,你想通过设置float元素的z-index来的达到覆盖position:absolute是无效的。同理,float元素下面存在position: absolute的子元素,如果你不将float的元素的position设置成relative的话,absolute元素是不会定位到float元素的。

4)同时应用position: absolute和float: left会导致清除浮动无效(position: relative则可以清除浮动)。
常用的清除浮动的方法有两种:

通过在容器中添加一个标签,设置该标签的样式为 clear: both容器设置overflow: hidden

<div style="background: #fff; width: 100%; overflow: hidden;"> <div style="float: left; position: absolute;">我是DIV</div> <div style="clear: both;"></div><div>