如何使用CSS创建一个“浮动”于HTML中所有其他内容之上的div？

Question

我想创建一个div，当用户使用JS将鼠标悬停在特定对象上时，它会弹出。这些我都知道。但我的问题是，div在文本中，当它弹出时，它会使一切变得丑陋。我希望它漂浮在文本的上方。使用CSS可以做到这一点吗？

Answer 1

请参考下面的示例：

<div class="container">
    <div class="floating">Floating Div</div>
    <div>
        <p>Para Text Goes Here</p>
        <p>More Text</p>
    </div>
</div>

这是你的CSS：

.container {
    border: 1px solid #DDDDDD;
    width: 200px;
    height: 200px;
    position:relative;
}
.floating {
    float: left;
    position: absolute;
    left: 0px;
    top: 0px;
    background-color: grey;
}

要做的事情：

容器上的POSITION:RELATIVE和浮动潜水上的POSITION:ABSOLUTE的使用

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

希望它能为你工作！

Answer 2

希望这能帮上忙。

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