Hinzufügen einer Leiste auf der Oberseite einer Website mit einem festen Element

-1

Ich habe eine Website, die ich eine obere Leiste hinzufügen möchten, wie im folgenden Beispiel: http://demo.codesupply.co/ jedoch möchte ich keinen iframe verwenden und ich kann nicht Ändern Sie das aktuelle CSS der Site. Ich muss in der Lage sein, ein neues div mit seinen eigenen Klassen zu erstellen, die an der Spitze der Website bleibt, aber meine Website hat eine Navigationsleiste, die oben auf der Website platziert ist, dann überlappen sie.Hinzufügen einer Leiste auf der Oberseite einer Website mit einem festen Element

Wie kann ich meine neue Top-Bar auf der gesamten Website schalten, ohne jedes andere Element Vertuschung?

* ich noch nicht den Grund für den Downvote sehen kann, ist es eine völlig legitime Frage.

Quelle

2017-03-05 human

so, wenn Sie die CSS der Seite nicht ändern können, dann was würde es tun Klassen, um es hinzuzufügen? Wie auch immer, Sie könnten ein neues div mit 100% Breite hinzufügen, auch fixed und top 0, aber mit einem höheren Z-Index als die Navigationsleiste, um es zu bedecken. Ist das was du meinst? – Tularis

Ich füge ein WordPress-Plugin hinzu, das diese obere Leiste auf jeder Seite einfügt, so dass die ursprüngliche Seite nicht geändert werden kann, das ist, was ich meinte. Ein Z-Index wird immer noch dazu führen, dass sie meinen oberen Balken mit einer möglichen Position überlappen: fixed; oben: 0; Element auf der Website. Ich möchte, dass meine obere Leiste oben auf der Site und dann die gesamte Site unterhalb meiner oberen Leiste positioniert wird, wobei das Beispiel ohne Iframe simuliert wird. – human

Wenn Sie keinen Zugriff auf die CSS hat, dann können Sie Inline-CSS verwenden und eine ‚PUSH‘ Methode verwenden, die das tut, was es bedeutet, drückt er den Inhalt unten auf der Seite, so dass sie nicht überlappen. JsFiddle hier: https://jsfiddle.net/SimonHayter/090ar1u0/

<div style="position: fixed; top: 0; left: 0; width: 100%; height: 40px;> 
    Hello, I am Menu, nice to meet you. 
</div> 
<div style="height:40px;width:100%;"> 
    Let's push the page down 40px, you can't see me! 
</div> 
<div> 
    Existing Content 
</div>

Oder Sie könnten einfach bearbeiten die vorhandene HTML-margin-top, dh hinzuzufügen:

<div style="position: fixed; top: 0; left: 0; width: 100%; height: 40px;> 
    Hello, I am Menu, nice to meet you. 
</div> 
<div class="container" style="margin-top: 40px;"> 
    This is where your existing content lives. 
</div>

Wenn Sie Inline-CSS nicht mögen, dann können Sie einfach einen <style>, nachdem der Körper in HTML5 hinzuzufügen, so wie:

<body> 
    <style> 
     .menu { 
      position: fixed; 
      top: 0; 
      left: 0; 
      width: 100%; 
      height: 40px; 
     } 
     .container { 
      margin-top: 40px; 
     } 
    </style> 
    <div class="menu"> 
     Hello, I am Menu, nice to meet you. 
    </div> 
    <div class="container"> 
     Existing Content 
    </div> 
</body>

Wenn Sie keinen Zugriff auf den HTML entweder dann können Sie Apache zu Modifying static content using a CGI script verwenden.

Quelle

2017-03-05 19:29:23

Dies funktioniert nicht, weil Elemente mit 'position: fixed;' meine obere Leiste überlappen werden, wie hier gezeigt: https://jsfiddle.net/b8p5ckvc/ – human

Dann benutze 'top: 0' nicht auf deinem Menü, Verwenden Sie die Höhe der darüberliegenden Leiste ... dh https://jsfiddle.net/SimonHayter/b8p5ckvc/1/ oder verwenden Sie '' –

Ein anderes JSFiddle diesmal mit Stil überschreibt https: //jsfiddle.net/SimonHayter/b8p5ckvc/4/ –

Hinzufügen einer Leiste auf der Oberseite einer Website mit einem festen Element

Antwort

Verwandte Themen