Question

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

如何将新的顶栏放在整个网站的顶部，而不会覆盖任何其他元素？

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

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

在具有固定元素的站点顶部添加栏

1 个答案: