CSS 在页面内容上方浮动一个 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2006134/
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
Float a div above page content
提问by Eric Di Bari
I've implemented a popup box that dynamically displays search options. I want the box to "float" above all of the site content. Currently, when the box is displayed it displaces all of the content below it and looks bad.
我已经实现了一个动态显示搜索选项的弹出框。我希望该框“浮动”在所有网站内容之上。目前，当显示框时，它会取代它下面的所有内容，看起来很糟糕。
I believe I've already tried setting the z-index of the box's div to above that of the remaining page content, but still no luck.
我相信我已经尝试将框的 div 的 z-index 设置为高于剩余页面内容的 z-index，但仍然没有运气。
回答by marcgg
You want to use absolute positioning.
你想使用绝对定位。
An absolute position element is positioned relative to the first parent element that has a position other than static. If no such element is found, the containing block is html
绝对位置元素相对于具有非静态位置的第一个父元素定位。如果没有找到这样的元素，则包含块是 html
For instance :
例如 ：
.yourDiv{
position:absolute;
top: 123px;
}
To get it to work, the parent needs to be relative (position:relative)
为了让它工作，父级需要是相对的 ( position:relative)
In your case this should do the trick:
在您的情况下，这应该可以解决问题：
.suggestionsBox{position:absolute; top:40px;}
#specific_locations_add{position:relative;}
回答by Jimmy Shelter
Use
用
position: absolute;
top: ...px;
left: ...px;
To position the div. Make sure it doesn't have a parent tag with position: relative;
定位div。确保它没有带有 position:relative; 的父标签。
回答by Web Design Mumbai
give z-index:-1to flash and give z-index:100to div..
给z-index:-1flash 给z-index:100div ..
回答by Serpico
Yes, the higher the z-index, the better. It will position your content element on top of every other element on the page. Say you have z-index to some elements on your page. Look for the highest and then give a higher z-index to your popup element. This way it will flow even over the other elements with z-index. If you don't have a z-index in any element on your page, you should give like z-index:2; or something higher.
是的，z-index 越高越好。它会将您的内容元素放置在页面上所有其他元素的顶部。假设您有页面上某些元素的 z-index。寻找最高值，然后为您的弹出元素提供更高的 z-index。这样它甚至会流过其他具有 z-index 的元素。如果您的页面上的任何元素中都没有 z-index，则应该使用 z-index:2; 或更高的东西。
回答by Pranesh Janarthanan
The below code is working,
下面的代码正在工作，
<style>
.PanelFloat {
position: fixed;
overflow: hidden;
z-index: 2400;
opacity: 0.70;
right: 30px;
top: 0px !important;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
</style>
<script>
//The below script will keep the panel float on normal state
$(function () {
$(document).on('scroll', function () {
//Multiplication value shall be changed based on user window
$('#MyFloatPanel').css('top', 4 * ($(window).scrollTop() / 5));
});
});
//To make the panel float over a bootstrap model which has z-index: 2300, so i specified custom value as 2400
$(document).on('click', '.btnSearchView', function () {
$('#MyFloatPanel').addClass('PanelFloat');
});
$(document).on('click', '.btnSearchClose', function () {
$('#MyFloatPanel').removeClass('PanelFloat');
});
</script>
<div class="col-lg-12 col-md-12">
<div class="col-lg-8 col-md-8" >
//My scrollable content is here
</div>
//This below panel will float while scrolling the above div content
<div class="col-lg-4 col-md-4" id="MyFloatPanel">
<div class="row">
<div class="panel panel-default">
<div class="panel-heading">Panel Head </div>
<div class="panel-body ">//Your panel content</div>
</div>
</div>
</div>
</div>
回答by roryf
The results container div has position: relativemeaning it is still in the document flow and will change the layout of elements around it. You need to use position: absoluteto achieve a 'floating' effect.
结果容器 divposition: relative意味着它仍然在文档流中，并且会改变它周围元素的布局。您需要使用position: absolute来实现“浮动”效果。
You should also check the markup you're using, you have phantom <li>s with no container <ul>, you could probably replace both the div#suggestionsand div#autoSuggestionsListwith a single <ul>and get the desired result.
您还应该检查您正在使用的标记，您有<li>没有 container 的phantom s <ul>，您可能可以用单个替换div#suggestions和并获得所需的结果。div#autoSuggestionsList<ul>
