Question

我有<div>穿过页面，其位置固定在顶部。我希望它像横幅一样，<body>的其余部分显示在此横幅下方，但由于其位置:(已）固定，横幅将覆盖其余部分内容。

//This is the CSS
#banner {
height: 127px;
width: 100%;
position: fixed;
top: 0;
}

下面，在html中，你可以看到<p>标签，这会被横幅所覆盖，我知道我可以使用margin-top对其进行排序但是有没有办法让标签真正识别<div>的存在并让位给它？

//This is the html, you can guess what it is...

<div id="banner"></div>

<p>Hello world</p>

先谢谢，P.S：我已经尝试过了：两个;在CSS中 - 仍然无法正常工作。

Answer 1

您需要为内容指定margin-top: 127px或top: 127px;属性。我还会将内容包装在div中，以便为您的所有内容完成此操作。

此代码可以解决您的问题：

<div id="banner"></div>
<div class="wrapper"> <!-- Content Wrapper -->
    <p>Hello world</p>
</div> <!-- End Content Wrapper -->

CSS：

/* This is the CSS */

#banner {
    height: 127px;
    width: 100%;
    position: fixed;
    top: 0;
}

.wrapper {
    margin-top: 127px;
}

你也可以这样做：

.wrapper {
    top: 127px;
}

我个人不建议像Paulie_D建议的padding: 127px;使用body，因为这会阻止您在内容中添加填充。 margin: 127px;我的建议是我建议的，因为它为您提供了更大的灵活性。虽然，你应该使用你喜欢的方法，因为这是主要的，两种方法都有效。

PS。您将CSS注释与JS注释混合在一起。

Answer 2

只需将padding-top添加到正文

即可

＆＃13;

* {
  margin: 0;
  padding: 0;
}
body {
  padding-top: 127px;
}
#banner {
  height: 127px;
  width: 100%;
  position: fixed;
  top: 0;
  background: red;
}

＆＃13;

<div id="banner"></div>

<p>Hello world</p>

＆＃13;

Answer 3

如果您不想使用margin-top，那么您可以在横幅之后放置一个div，其高度相同，然后让div推下其余部分。

所以你的代码看起来像这样：

CSS：

* {
    margin: 0;
}
#banner {
    position: fixed;
    top: 0;
}
.push, #banner {
    height: 127px;
    width: 100%;
}

HTML：

<div id="banner">
    <p>Banner!</p>
</div>
<div class="push"></div>
<div class="container">
    <p>Hello world</p>
</div>

我还制作了一个JSFiddle：Here

如何使FIXED <div>仍被其他标签识别？

3 个答案: