我已经实现了一个弹出框，可以动态显示搜索选项。我希望该框“浮动”在所有网站内容之上。当前，当显示该框时，它将替换其下方的所有内容，并且看起来很糟。
我相信我已经尝试将box的div的z-index设置为高于其余页面内容的z-index，但是仍然没有运气。
我已经实现了一个弹出框，可以动态显示搜索选项。我希望该框“浮动”在所有网站内容之上。当前，当显示该框时，它将替换其下方的所有内容，并且看起来很糟。
我相信我已经尝试将box的div的z-index设置为高于其余页面内容的z-index，但是仍然没有运气。
Answers:
您要使用绝对定位。
绝对位置元素相对于具有非静态位置的第一个父元素放置。如果找不到这样的元素，则包含的块为html
例如 ：
.yourDiv{
position:absolute;
top: 123px;
}
要使其正常工作，父级必须是亲戚（position:relative）
在您的情况下，这应该可以解决问题：
.suggestionsBox{position:absolute; top:40px;}
#specific_locations_add{position:relative;}
position: sticky;？我有一个导航栏，当页面滚动时，我想保留在原处，将其更改为绝对值会破坏它。
使用
position: absolute;
top: ...px;
left: ...px;
定位div。确保它没有带有position：relative;的父标记。
z-index。
下面的代码正在工作，
<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>