浮动 div 元素答案

【问题标题】：Floating div element浮动 div 元素
【发布时间】：2019-10-14 23:55:55
【问题描述】：

我想创建一个“浮动”的 div 元素，不是float property 的意义，而是字面上的“浮动”：

【问题讨论】：

【解决方案1】：

position: absolute 有足够高的z-index:

#element {
    position: absolute;
    top: 50px;
    left: 200px;
    z-index: 10;
}

【讨论】：

【解决方案2】：

这是对 Tatu 的回答的跟进，它会起作用，但是以一种笨拙但非常常见的方式使用 z-index。

Z-index 决定了定位元素相对于其他定位元素的堆叠顺序。堆叠顺序也与父元素的堆叠顺序有关。所以：

当页面中有两个同级元素时：

<body>
    <div style="position:absolute;z-index:2"></div><!-- Position 2 (top) -->
    <div style="position:absolute;z-index:1"></div><!-- Position 1 (bottom) -->
</body>

它们都根据它们的父级进行堆叠 - body，它位于堆栈的默认“底部”。

现在，当这些元素的子元素具有 z-index 时，它们在堆栈中的位置是相对于它们父元素的位置确定的：

<body>
    <div style="position:absolute;z-index:2"><!-- Position 2 (top) -->
         <div style="position:absolute;z-index:2"></div><!-- Position 2.2 -->
         <div style="position:absolute;z-index:1"></div><!-- Position 2.1 -->
    </div>
    <div style="position:absolute;z-index:1"><!-- Position 1 (bottom) -->
         <div style="position:absolute;z-index:2"></div><!-- Position 1.2 -->
         <div style="position:absolute;z-index:1"></div><!-- Position 1.1 -->
    </div>
</body>

我发现将子元素视为具有“点”z-index 很有用 - 因此具有 z-index:1 的元素的子元素的 z-index 为 1.x。这样，你可以看到，即使我给这个 div 的 z-index 为 100000，它也永远不会出现在父 z-index 为 2 的元素之上。2.x 总是出现在1.x

当您制作“浮动”的东西（如叠加层、便利贴等）时，这很有用。这样的设置是一个好的开始：

<body>
    <div id="contentContainer" style="position:relative;z-index:1">
        All your 'page level content goes here. You can use all the z-indexes you like.
    </div>
   <div id="overlayContainer" style="position:relative;z-index:2">
        Anything to float 'on top of the page' goes here. Nothing inside 'contentContainer' can ever appear on top of it.
    </div>
</body>

任何你想浮在上面的东西都会进入“overlayContainer”——基本的 z-index 将两个“layer”分开，你可以避免使用像 999999 或 100000 这样令人困惑的高 z-index。

【讨论】：

【解决方案3】：

是的，你需要你的 CSS 看起来像这样

.floating-div {
  position: absolute;
  left: 40px;
  top: 40px;
  z-index: 100000;
}

【讨论】：

如果您使用的是非常高的 z-index，那么您可能没有正确使用它们。通常人们用这些来表达“真的，真的，把这个放在最上面”，但是如果另一个元素有 100001 会发生什么？有关管理 z-index 的更好方法的代码示例，请参阅我的“答案”。
我完全同意，我只是输入“大”来清楚地表明数字更高的重要性。

【解决方案4】：

您必须使用定位和 z-index 来做到这一点；

【讨论】：