时间戳

首页 > 解决方案 > 为什么位置：相对会导致先前浮动的兄弟姐妹被隐藏

css - 为什么位置：相对会导致先前浮动的兄弟姐妹被隐藏

问题描述

我试图理解为什么在以下代码笔中： https ://codepen.io/benrhere/pen/XWRmVjr

设置位置：第二个兄弟的相对影响（隐藏）第一个兄弟的可见性（使用 Chrome 91.0.4472.124）。你可以在下面的第一个方形 div 中看到问题，而第二个方形 div 没有这个问题。唯一的区别是第二个兄弟被标记为位置：相对。似乎这将第一个兄弟元素放在堆叠顺序后面，尽管我预计应用 position: relative 只会影响其子元素的堆叠顺序，而不是其兄弟元素。

最终，我将不再使用 float: 是的，但我只是对此感到好奇。

图片显示可能不同的堆叠顺序

<html>
  <body>
    <div class="outer">
      <span class="floated">X</span>
            <div id="relative">Y</div>
    </div>
    <hr />
    <div class="outer">
      <span class="floated">X</span>
      <div id="notRelative">Y</div>
    </div>
  </body>
</html>

标签： csscss-floatz-index

解决方案

元素的默认位置是静态的，但是当您为元素指定位置而不是静态时，它会给定一个 z-index。这就是为什么您的跨度低于 div 的堆栈索引的原因。

推荐阅读