Html 浮动div元素_Html_Css Position

Html 浮动div元素

html

Html 浮动div元素,html,css-position,Html,Css Position,我想创建一个div元素，它是“浮动的”，不是在的意义上，而是字面上的“浮动”：你必须使用定位和z-索引位置：绝对，z指数足够高： #element { position: absolute; top: 50px; left: 200px; z-index: 10; } 是的，你需要你的CSS看起来像这样 .floating-div { position: absolute; left: 40px; top: 40px; z-index: 10

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

你必须使用定位和z-索引

位置：绝对

，z指数足够高：

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

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

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

这是对Tatu的答案的一个跟进，该答案将起作用，但以一种笨拙但非常常见的方式使用z索引

Z索引确定定位元素相对于其他定位元素的堆叠顺序。堆叠顺序也与父元素的堆叠顺序有关。因此：

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

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

我发现将子元素视为具有“点”z索引是很有用的，因此具有

z-index:1

的元素的子元素的z索引为

1.x

。这样，您可以看到，即使我给这个div一个100000的z索引，它也永远不会出现在父z索引为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>


你所有的页面级内容都在这里。您可以使用所有喜欢的z索引。
任何漂浮在“页面顶部”的东西都在这里。“contentContainer”中的任何内容都不能出现在它上面。

任何你想浮在上面的东西都会进入“OverlyContainer”——基本z索引将两个“层”分开，你可以避免使用令人困惑的高z索引，如9999999或100000。

如果你使用的是那样的高z索引，你可能没有正确使用它们。通常人们用这些来表示‘真的，真的，把这个放在上面’，但是如果另一个元素有100001，会发生什么呢？有关更好地管理z索引的代码示例，请参见我的“答案”。我完全同意，我只是键入了“large”来清楚说明数字更高的重要性，这令人讨厌。

<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>