使用'position：absolute`和`float：left`时的预期行为是什么？

使用position: absolute和float:left在一起，看起来像一个有点混乱，甚至是荒谬的，因为position: absolute不会影响兄弟元素的位置，同时float:left会影响兄弟浮动元素的位置。使用'position：absolute`和`float：left`时的预期行为是什么？

但是，在CSS中允许一起使用它们，那么期望的行为是什么？我不太确定如果使用它们两者，会发生什么情况，因为MDN文档（https://developer.mozilla.org/en-US/docs/Web/CSS/float）中未描述它们。

有没有人有任何想法呢？谢谢！

来源

2016-03-05 Hanfei Sun

你应该建立一些测试用例并整理出来。一起使用它们看起来完全错误 - 我认为这个位置：绝对将会“覆盖”对兄弟姐妹的影响，并且它会导致该元素基本上不会在页面上的其他元素的位置上占据“空间”。 –

它在CSS2说明书中讨论的（https://www.w3.org/TR/CSS2/visuren.html#dis-pos-flo）：

否则，如果 '位置' 具有值 '绝对' 或 '固定'，则框是定位的绝对位置为，'float'的计算值为'none'，并根据下表设置显示为。该框的位置将由'顶部'，'右'，'底部'和'左'属性以及框的包含块确定的。

所以得出的结论是，float设置为none强制时position的值为absolute。

来源

2016-03-08 06:02:48

将float:left;添加到absolute定位元素显然不会添加元素的任何行为变化。大多数display属性的情况也是如此。例如，添加display:inline;不会导致失去其维度。

它也没有显示与相邻浮动元素的任何连接。

.box{ 
 
    border: 1px solid red; 
 
    float: left; 
 
    height: 100px; 
 
    width: 100px; 
 
} 
 
.box1{ 
 
    border: 1px solid green; 
 
    height: 100px; 
 
    width: 100px; 
 
    position: absolute; 
 
    display: table; 
 
}

<div class="box"></div> 
 
    <div class="box1"></div>

但是，当在相邻的元件的float被移除时，绝对定位元件定位在其下方。

.box{ 
 
    border: 1px solid red; 
 
    height: 100px; 
 
    width: 100px; 
 
} 
 
.box1{ 
 
    border: 1px solid green; 
 
    height: 100px; 
 
    width: 100px; 
 
    position: absolute; 
 
    display: table; 
 
}

<div class="box"></div> 
 
    <div class="box1"></div>

来源

2016-03-05 15:48:06

使用'position：absolute`和`float：left`时的预期行为是什么？

回答

相关问题