javascript 如何使用 CSS 制作一个“浮动”在 HTML 中所有其他内容之上的 div?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/23931307/
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
How do I make a div that "floats" above all the other content in HTML with CSS?
提问by Post Self
I want to make a div, that pops up when the user hovers on a specific object with JS. I know all that. But my problem is, that the div is within the text and makes everything ugly when it pops up. I want it to float above the text. Is that possible with CSS? If not, is it possible with a plugin or a scripting language?
我想制作一个 div,当用户使用 JS 将鼠标悬停在特定对象上时会弹出。我知道这一切。但我的问题是,div 位于文本中,并且在弹出时使所有内容变得丑陋。我希望它漂浮在文本上方。使用 CSS 可以实现吗?如果没有,是否可以使用插件或脚本语言?
回答by Sagar Awasthi
Please refer the example below:
请参考以下示例:
<div class="container">
<div class="floating">Floating Div</div>
<div>
<p>Para Text Goes Here</p>
<p>More Text</p>
</div>
</div>
here is your CSS:
这是你的 CSS:
.container {
border: 1px solid #DDDDDD;
width: 200px;
height: 200px;
position:relative;
}
.floating {
float: left;
position: absolute;
left: 0px;
top: 0px;
background-color: grey;
}
Things to do:
要做的事情:
The use of POSITION:RELATIVEon container and POSITION:ABSOLUTEon floating div
采用相对:位置在容器和绝对的:位置上浮动DIV
please have a look at the working example : http://jsfiddle.net/tH84L/
请看一下工作示例:http: //jsfiddle.net/tH84L/
Hope it works for you!
希望对你有帮助!
回答by jacquel
Hope this helps....
希望这可以帮助....
<body>
<div id="aFloat">float</div>
</body>
css:
css:
body {
position: relative
}
#aFloat {
z-index: 1000;
position: absolute;
width: 200px;
height: 100px;
background-color: grey;
color: white;
}