在固定元素的网站顶部添加一个条

问题描述：

我有一个网站，我想添加一个顶部栏，如下例所示：http://demo.codesupply.co/但是我不想使用iframe，但我不能修改网站的当前CSS。我需要能够创建一个新的div，它自己的类粘贴到站点的顶部，但是我的站点有一个position:fixed; top:0;导航栏，它也放置在站点的顶部，然后它们重叠。在固定元素的网站顶部添加一个条

如何将我的新顶杆放置在整个站点的顶部，而没有任何其他元素覆盖？

*我还是看不出downvote的原因，这是一个完全合法的问题。

所以，如果你不能改变页面的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。

这将无法正常工作，因为具有'position：fixed;'的元素将与我的顶栏重叠，如下所示：https://jsfiddle.net/b8p5ckvc/ – human

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

另一个JSFiddle这次与样式覆盖https： //jsfiddle.net/SimonHayter/b8p5ckvc/4/ –

在固定元素的网站顶部添加一个条

相关推荐