如何使用CSS“浮动”高于HTML中所有其他内容的div？

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有关吗?如果没有,是否可以使用插件或脚本语言?

2 个解决方案

#1

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:RELATIVE on container and POSITION:ABSOLUTE on floating div

在容器和POSITION上使用POSITION:RELATIVE:在浮动div上使用ABSOLUTE

please have a look at the working example : http://jsfiddle.net/tH84L/

请看一下工作示例:http://jsfiddle.net/tH84L/

Hope it works for you!

希望对你有帮助!

#2

Hope this helps....

希望这可以帮助....

<body>

<div id="aFloat">float</div>

</body>

css:

body {
    position: relative
}
#aFloat {
z-index: 1000;
position: absolute;

width: 200px;
height: 100px;

background-color: grey;
color: white;
}

#1