検索オプションを動的に表示するポップアップボックスを実装しました。ボックスをすべてのサイトコンテンツの上に「フロート」させたい。現在、ボックスが表示されると、その下のすべてのコンテンツが置き換えられ、見栄えが悪くなります。
ボックスのdivのz-indexを残りのページコンテンツのz-indexに設定しようとしましたが、それでもうまくいきません。
検索オプションを動的に表示するポップアップボックスを実装しました。ボックスをすべてのサイトコンテンツの上に「フロート」させたい。現在、ボックスが表示されると、その下のすべてのコンテンツが置き換えられ、見栄えが悪くなります。
ボックスのdivのz-indexを残りのページコンテンツのz-indexに設定しようとしましたが、それでもうまくいきません。
回答:
絶対位置決めを使用したい。
絶対位置要素は、静的以外の位置を持つ最初の親要素を基準にして配置されます。そのような要素が見つからない場合、含まれているブロックは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
同様に使用する必要があるかもしれません。
与えz-index:-1
点滅して与えることをz-index:100
div要素に..
以下のコードは機能しています、
<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>