在固定元素的網站頂部添加一個條

-1

我有一個網站，我想添加一個頂部欄，如下例所示：http://demo.codesupply.co/但是我不想使用iframe，但我不能修改網站的當前CSS。我需要能夠創建一個新的div，它自己的類粘貼到站點的頂部，但是我的站點有一個position:fixed; top:0;導航欄，它也放置在站點的頂部，然後它們重疊。在固定元素的網站頂部添加一個條

如何將我的新頂杆放置在整個站點的頂部，而沒有任何其他元素覆蓋？

*我還是看不出downvote的原因，這是一個完全合法的問題。

來源

2017-03-05 human

所以，如果你不能改變頁面的CSS，那麼它會爲它添加類有什麼好處呢？無論如何，您可以添加一個寬度爲100％的新div，也可以固定位置和最高位置0，但Z-index高於導航欄來覆蓋它。這是你的意思嗎？ – Tularis

我正在添加一個WordPress插件，將這個頂部欄插入任何網站，所以原來的網站不能修改，這就是我的意思。 z-index仍然會導致它們與我的頂欄重疊，並具有任何可能的位置：fixed;頂部：0;元素在網站上。我希望我的頂部酒吧位於網站頂部，然後是我的頂部酒吧底下的整個網站，基本上模擬了不帶iframe的情況下提供的示例。 – human

如果您無法訪問CSS，那麼您可以使用內聯CSS並使用「PUSH」方法來實現其意義，它會將內容向下推送，因此不會重疊。的jsfiddle這裏：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>

或者您也可以編輯現有的HTML添加margin-top，即：

<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>

如果你不喜歡內聯CSS，那麼你可以簡單地在HTML5中添加<style>體內後，像這樣：

<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>

如果您沒有訪問HTML兩種，那麼你可以使用Apache來Modifying static content using a CGI script。

來源

2017-03-05 19:29:23

這將無法正常工作，因爲具有'position：fixed;'的元素將與我的頂欄重疊，如下所示：https://jsfiddle.net/b8p5ckvc/ – human

然後，不要在菜單上使用'top：0'，使用它上面的酒吧的高度...即https://jsfiddle.net/SimonHayter/b8p5ckvc/1/或使用'' –

另一個JSFiddle這次與樣式覆蓋https： //jsfiddle.net/SimonHayter/b8p5ckvc/4/ –

在固定元素的網站頂部添加一個條

回答

相關問題