在带有固定元素的站点顶部添加一个栏答案

【问题标题】：Adding a bar on the top of a site with a fixed element在带有固定元素的站点顶部添加一个栏
【发布时间】：2017-07-25 13:36:04
【问题描述】：

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

我怎样才能将我的新顶栏放置在整个网站的顶部，而不会覆盖任何其他元素？

*我仍然看不到投反对票的原因，这是一个完全合理的问题。

【问题讨论】：

那么，如果你不能改变页面的css，那么给它添加类有什么好处呢？无论如何，您可以添加一个 100% 宽度的新 div，位置也固定和顶部 0，但 z-index 比导航栏更高来覆盖它。是这个意思吗？
我正在添加一个 WordPress 插件，该插件会将这个顶部栏注入任何站点，因此无法修改原始站点，这就是我的意思。 z-index 仍然会导致它们与我的顶栏与任何潜在位置重叠：固定；顶部：0；网站上的元素。我希望我的顶栏位于网站顶部，然后整个网站位于我的顶栏下方，基本上模拟了没有 iframe 提供的示例。

标签： html css

【解决方案1】：

如果您无法访问 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; 的元素将与我的顶栏重叠，如下所示：jsfiddle.net/b8p5ckvc
那么不要在你的菜单上使用top: 0，使用它上方栏的高度...即jsfiddle.net/SimonHayter/b8p5ckvc/1或使用<style>.yourmenu { top: 40px;}</style>
这次是另一个 JSFiddle，样式覆盖 jsfiddle.net/SimonHayter/b8p5ckvc/4
谢谢你的帮助，不幸的是，正如我所说我不能修改原始网站，我只能设置顶部栏元素的样式。
你不能有两个元素使用position: fixed; top: 0;如果你能添加一个元素那么你就可以添加<style>或者你甚至可以使用JavaScript<script>$(".yourmenu").attr("style", "top: 0;");</script>，我很难相信你不能这样做，而是你不想这样做，这在你的问题中没有说明。