2017-12-28 9 views
0

ブレッドクラムを上部に貼り付けようとしていますが、何らかの理由でそれをやろうとすると、スクリーンショットのように間に隙間ができます。今私が持っているブレッドクラムは、私が下にスクロールするとトップにくっつくことができます。唯一の問題はギャップだけです。 enter image description here コード:誰かが、ここのおかげでたくさんブレッドクランプは上部に貼り付けます。ラベラー

スクリーンショットを手伝ってくれる

 <div class = "container" style=" position: fixed; left: 0; top:55px; width: 100%;"> 
      {{ Breadcrumbs::render('personal.edit',$id) }} 
     </div> 
    @section('content') 

    <div class="container" style="background-color:#C0C0C0; padding-top: 60px; position: relative;"> 

//content 
... 
... 
+0

Z-Indexingは、それがどのように見えるかです。それはページの別の要素の後ろにあります。それをテストするには 'z-index:1000;'を入れます。後者の固定要素をページに追加する方が良いのです。なぜなら、ページの上に積み重ねられないからです。 – ArtisticPhoenix

+0

最初のブレッドクラムに余白が残っている可能性があります。最初のコンテナの背景色を変更すると、ギャップがないことがわかります。背景を追加してみてください。スタイルには青があります。また、上で述べたように、Z-インデックスを変更する必要があります。 – iSZ

+0

@ArtisticPhoenix z-indexingは機能しますが、私はそれが何をするのでしょうか?私はそれほど多くの人がそれについて話すことは全く見たことがありません – blastme

答えて

1

をそれはz-index問題のように見えます。 Z-Indexは、レイヤーやページ上の要素の積み重ね順序と同じです。だから私にとっては、コンテナdivの1つがbreadcrumbs要素の上にレンダリングされているように見えます(これは固定されています)。

z-index:1000;を要素スタイルに追加することでテストできます。

これは、ページ内の下側にある要素を下に移動することで簡単に修正できるため、スタック内に上に表示されているものの後にレンダリングされます。通常、z-indexを任意に設定することは悪い考えです。これは、z-index値が高いメニュードロップダウンやポップアップなどに悪影響を及ぼす可能性があるためです。次に、あなたの要素がそれらの上に表示されるところの反対の問題に巻き込まれます。

「位置」固定または抽象要素の場合はかなり一般的な問題です。

関連する問題