如何创建一个&;float &;上面的所有其他内容在HTML与CSS

How do I make a div that "floats" above all the other content in HTML with CSS?

本文关键字：其他 CSS HTML float 创建 何创建 一个      更新时间：2023-09-26

我想创建一个div，当用户用JS将鼠标悬停在特定对象上时弹出。这些我都知道。但我的问题是，div在文本中，当它弹出时，一切都很难看。我想让它浮在文本上方。这在CSS中可能吗?如果没有，是否可以使用插件或脚本语言?

请参考下面的示例:

<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，在浮动div上使用POSITION:ABSOLUTE

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

希望它对你有用!

希望对您有所帮助....

<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;
}
相关文章：