Html 让一个 div 漂浮在另一个 div 上？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7320945/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Make one div float over another?
提问by Firdous
I have two div elements on a page. How can I make one div to float over another just like a popup? In other words, div2 (the popup) would cover some part of the area of div1 (the parent).
我在一个页面上有两个 div 元素。如何让一个 div 像弹出窗口一样漂浮在另一个 div 上？换句话说，div2（弹出窗口）将覆盖 div1（父级）区域的一部分。
回答by yoozer8
Use position:absolute;and set the "popup" one to be positioned within the boundaries of the other. The "popup" div should likely also be smaller.
使用position:absolute;并设置“弹出”一个定位在另一个的边界内。“弹出”div 也应该更小。
Use z-indexto stack the "popup" one above the other one (give it a higher value for z-index).
用于z-index将“弹出”一个堆叠在另一个上方（给它一个更高的值z-index）。
If you want to make it look like the inner div is really floating above the other one, create a shadow with something like border-right:2px solid blackand border-bottom:2px solid black.
如果你想让它看起来像内部 div 真的漂浮在另一个上面，创建一个类似于border-right:2px solid black和的阴影border-bottom:2px solid black。
If you want to make it actually pop up/appear/disappear, you will need to use some script.
如果你想让它真正弹出/出现/消失，你需要使用一些脚本。
回答by Mike_OBrien
I believe setting the positionto fixedwill cause it to stay visible even if the user scrolls. You can set the position using "top", "left" and "right" attributes. The CSS I use for a "beta" logo which basically does what you are asking is this:
我相信设置position到fixed将导致它留如果用户滚动可见均匀。您可以使用“top”、“left”和“right”属性设置位置。我用于“测试版”徽标的 CSS 基本上可以满足您的要求：
.fixed{
position:fixed;
top:0px;
right:0px;
width:100px;
}
回答by Tushar Ahirrao
Then use z-index property of css like this :
然后像这样使用 css 的 z-index 属性：
div1 {
z-index:1000;
}
div2 {
z-index:1001;
}
Highest z-index element will be display at top.
最高的 z-index 元素将显示在顶部。
