浮动的div元素

Question

浮动的div元素

htmlcss-position

14

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

alt text

- ripper234

"float 属性"的链接已失效。 - Antoine

4个回答

6

这是对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保持两个“层”分开，这样你就可以避免使用像999999或100000这样令人困惑的高z-index。

- Ben Hull

1

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

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

- Russ Clarke

如果您使用非常高的z-index，那么您可能没有正确使用它们。通常人们使用它们来表示“真的，真的，把这个放在最上面”，但是如果另一个元素有100001怎么办？请参阅我的“答案”中的代码示例，以更好地管理z-index。 - Ben Hull

我完全同意，我只是打“大”字是为了非常明确地表明数字的重要性。 - Russ Clarke

0

你必须使用定位和z-index来完成它；

- Salil

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Tatu Ulmanen · Accepted Answer

position: absolute 设置一个足够高的 z-index 值：

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