web-dev-qa-db-ja.com

ページコンテンツの上にdivをフロートする

検索オプションを動的に表示するポップアップボックスを実装しました。ボックスをすべてのサイトコンテンツの上に「浮かせる」ようにします。現在、ボックスが表示されると、その下のすべてのコンテンツが置き換えられ、見た目が悪くなります。

ボックスのdivのz-indexを残りのページコンテンツのz-indexよりも上に設定しようとしたことがありますが、それでも運はありません。

cssz-index
65
Eric Di Bari

絶対配置 を使用します。

絶対位置要素は、静的以外の位置を持つ最初の親要素に対して相対的に配置されます。そのような要素が見つからない場合、包含ブロックはhtmlです

例えば ​​：

.yourDiv{
  position:absolute;
  top: 123px;
}

動作させるには、親が相対的である必要があります（position:relative）

あなたの場合、これはトリックを行う必要があります：

.suggestionsBox{position:absolute; top:40px;}
#specific_locations_add{position:relative;}
95
marcgg

つかいます

position: absolute;
top: ...px;
left: ...px;

Divを配置するには。 position：relative;の親タグがないことを確認してください。

13
Jimmy Shelter

z-index:-1をフラッシュに与え、z-index:100をdivに与えます。

9
Web Design Mumbai

はい、z-indexが高いほど良いです。コンテンツ要素をページ上の他のすべての要素の上に配置します。ページ上のいくつかの要素にz-indexがあるとします。最高値を探してから、ポップアップ要素に高いZインデックスを付けます。この方法では、z-indexを使用して他の要素にもフローします。ページのどの要素にもz-indexがない場合、z-index：2のように指定する必要があります。または何か高い。

1
Serpico

以下のコードは機能しています、

<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>
0
Pranesh Janarthanan

結果コンテナdivにはposition: relativeがあり、これはまだドキュメントフロー内にあり、その周囲の要素のレイアウトを変更することを意味します。 「フローティング」効果を得るには、position: absoluteを使用する必要があります。

また、使用しているマークアップも確認する必要があります。コンテナ<li>のないファントム<ul>sがあります。おそらく、div#suggestionsとdiv#autoSuggestionsListの両方を単一の<ul>および目的の結果を取得します。

0
roryf