浮动和位置如何协同工作？

Question

在下面的代码中，

<div class="box" id="one">One</div>
<div class="box" id="two">Two</div>
<div class="box" id="three">Three</div>
<div class="box" id="four">Four</div>

.box { 
   display: inline-block; 
   background: red; 
   width: 100px; 
   height: 100px; 
   float: left; 
   color: black; 
}

#one{
    background: red;
}
#two { 
   position: absolute;
   background: yellow; 
}
#three{
    background: green;
}
#four{
    background: blue;
}

-

框“两个”绝对定位并远离文件流，框“三”和“ “四个”正在取代“两个”框，因此，框“两个”作为最后一个元素被移位，如下图所示，看起来不错，

但是在下面的代码中，

<div id="parent-div">
      <div id="default">Default</div>
      <div id="centered">Centered</div>
      <div id="centered-text">Centered Text</div>
    </div>

   <div id="top-left-pos">Top Left

    </div>

    <div id="another-pos">Another pos
    </div>

#parent-div{
    background: #B3bEb5;
    border: 0.1em solid black;
}

#default{
  background: #DBE9F4;
}
#centered{
  background: #89CFF0;
  width: 50%;
  margin: auto;
}

/* text-align: left, right, center, justify */
#centered-text{
  text-align: center;
}

/* Absolute Positioning : Positioning Based on the Document */
#top-left-pos{
  background: #89CFF0;
  border: 0.1em solid black;
  position: absolute;
  width: 200px;
  height: 100px;
  float:left;   
}


#another-pos{
  background: #FF0000;
  border: 0.1em solid black;
  float: left;
  width: 190px;
  height: 110px;
}

top-left-pos元素绝对定位并远离文档流，another-pos元素取代top-left-pos元素但不替换top-left-pos元素？相反，another-pos元素会在top-left-pos元素下方呈现，如下所示，为什么top-left-pos不会被移位，与第一个方框“2”不同？

Answer 1

  

浮动和位置如何协同工作？

他们没有。绝对定位的元素不能浮动。浮动元素不能绝对定位。

当一个元素被指定为浮动和 position: absolute时，后者优先，而元素不浮动。虽然不相关，但您的第一个方案中的float: left也优先于display: inline-block。 spec有一个完整的小节，详细说明了display，position和float如何协同工作。

  

为什么top-left-pos没有被取代，不像盒子的第一个场景＆＃34;两个＆＃34;？

因为盒子＆＃34;两个＆＃34;在你的第一个场景中被浮动元素取代。在第二个场景中，没有浮动来替换该元素。你所拥有的只是两个绝对定位的元素，彼此没有意识到。

Answer 2

浮动与3D环境中的堆叠元素无关。根据{{​​3}}：

  

float CSS属性指定应该从中获取元素   正常流动并沿其左侧或右侧放置   容器，其中文本和内联元素将环绕它。

如果您希望将元素堆叠在一起，则可能需要z-index属性。您还需要使用position:absolute。

将它们从流程中移除

<强> 更新

令人沮丧的是，您已经编辑了原始问题并进行了一些重大更改。这些变化的症结就是问题：

  

浮动，位置和显示之间有什么关系？

谢天谢地，你可以去explanation on MDN。请这样做。 Stack Overflow不是您可以学习所有 任何 的地方。