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


81

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

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


2
あなたはそのアプローチがあなたに意図された効果を与えるかどうか見るためにグーグル「ライトボックス」に望むかもしれません。
DOK 2010年

3
質問のURLは、404
Bryan Oakley

回答:


111

絶対位置決めを使用したい。

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

例えば ​​:

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

それを機能させるには、親が相対的である必要があります(position:relative

あなたの場合、これでうまくいくはずです:

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

2
@MrBoJanglesはあなたのリンクを使用するために答えを更新しました。答えは4歳です、それは別の時間でした^^
marcgg 2014年

1
カップルノート:上または左、あるいはその両方の座標を指定する必要があります。そうしないと、機能しないようです。また、divを「画面上」にしたい場合は、ウェブページの現在の左上が常に「0,0」と表示されるとは限らないことに注意してください(表示されているように見えても)。stackoverflow.com/ q /で確認できます。3464876/32453。他に絶対位置のdivがある場合は、z-indexを設定する必要がある場合もあります。また、「フルスクリーン」オプションがある場合、「フルスクリーン」divの子要素でない限り、「トップdiv」が表示されない場合があります。GL!
rogerdpack 2016年

1
この回答は、「それを機能させるには、親が相対的である必要があります」、次の回答「位置が相対的な親タグがないことを確認してください」です。誰かが間違っています!
BJury 2017

これを行う方法はありませんposition: sticky;か?ページがスクロールしたときにその場所にとどまりたいナビゲーションバーがあり、それを絶対に変更するとそれが台無しになります。
CorruptComputer 2018

Bジュリーあなたはそれを間違って読んだ。配置しているdivを相対にすることはできません。内部にあるdivは相対的でなければなりません。
ジョンロード

13

使用する

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

divを配置します。position:relative;の親タグがないことを確認してください。


2
z-index同様に使用する必要があるかもしれません。
stommestack 2016年


1

はい、z-indexが高いほど良いです。これにより、コンテンツ要素がページ上の他のすべての要素の上に配置されます。ページ上のいくつかの要素へのz-indexがあるとします。最も高いものを探してから、ポップアップ要素に高いz-indexを指定します。このようにして、z-indexを持つ他の要素の上にも流れます。ページのどの要素にもz-indexがない場合は、z-index:2のように指定する必要があります。またはそれ以上のもの。


0

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

また、使用しているマークアップを確認する必要があります。<li>コンテナのないファントムが<ul>あり、div#suggestionsdiv#autoSuggestionsListを1つに置き換えて<ul>、目的の結果を得ることができます。


0

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

<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>
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.