2017-12-28 4 views
0

Ich versuche, meine Brotkrumen bleiben an der Spitze, aber aus irgendeinem Grund, wenn ich es versuche, gibt es eine Lücke dazwischen, wie im Screenshot gezeigt. Der Breadcrumb, den ich gerade habe, kann beim Scrollen nach unten oben bleiben. Das einzige Problem ist nur die Lücke. Kann mir hier jemand helfen, vielen DankBreadcrumps Stick an der Spitze Laravel

Screenshot: enter image description here Code:

 <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-Indizierung, so sieht es aus. Es ist hinter einem anderen Element auf der Seite. Setzen Sie 'z-index: 1000;', um es zu testen. Es ist besser, feste Elemente in letzterem auf der Seite hinzuzufügen, weil sie dann nicht übereinander gestapelt werden. – ArtisticPhoenix

+0

Ihre erste Brotkrume hat wahrscheinlich noch einen Rand. Wenn Sie die Hintergrundfarbe des ersten Containers ändern, werden Sie wahrscheinlich feststellen, dass keine Lücke vorhanden ist. Versuchen Sie, Hintergrund zu den Stilen hinzuzufügen. Wie bereits erwähnt, müssen Sie den Z-Index ändern. – iSZ

+0

@ArtisticPhoenix die Z-Indizierung funktioniert, aber kann ich fragen, was das tut? Ich habe nie wirklich viele Leute darüber reden gesehen – blastme

Antwort

1

Es sieht aus wie ein z-index Problem. Z-Index ist wie Ebenen oder die Stapelreihenfolge von Elementen auf der Seite. Für mich sieht es so aus, als ob einer der Container-Divs über das Breadcrumbs-Element (welches fest positioniert ist) gerendert wird.

Sie können es testen, indem Sie z-index:1000; zum Elementstil hinzufügen.

Oft kann dies einfach dadurch behoben werden, dass das Element auf der Seite nach unten verschoben wird, so dass es nach dem Material, das darüber im Stapel angezeigt wird, rendert. Es ist im Allgemeinen eine schlechte Idee, den Z-Index willkürlich zu setzen, da dies negative Auswirkungen auf Dinge wie Menü-Dropdowns und Popups haben kann, die einen hohen Z-Index-Wert benötigen. Dann enden Sie mit dem umgekehrten Problem, bei dem Ihr Element darüber hinaus rendert.

Es ist ein ziemlich häufiges Problem für "Position" feste oder abstrakte Elemente.