logo标签列表

固定定位内容重叠问题

csshtml
22
这是我的HTML5标记。
<div id="header">
</div>
<div id="content">
</div>
<div id="footer">
</div>

现在使用了CSS

header {
  height: 95px;
  position: fixed;
  width: 100%;
  min-width: 980px;
}

footer {
  background: #000000;
  bottom: 0;
  height: 30px;
  position: fixed;
  width: 100%;
  min-width: 980px
}

现在我的问题是当我放置任何内容时

<div id="content">
</div>

内容是从top:0获取的，但这并不是必须的。我不想在内容上使用padding或margin top。有没有办法让内容出现在标题下面。

4
“<content>”标签是什么？你从哪里得到这个想法的？ - thirtydot
1
请使用写作标签 "<article>" 替代 "<content>". - sandeep
10个回答
13
主要原因是因为<header>使用了position:fixed属性，使其脱离文档流。您需要在<body>或您的<content>元素中添加margin或padding。如果使用HTML5元素，请在CSS规则的顶部添加以下内容以兼容旧版浏览器。
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}

摘自Eric Meyer的CSS重置文件。

11

最佳解决方案如下：

position: sticky;
top: 0;
2
您没有提及其他可能存在的布局要求，但这将是一个很好的起点。
content {position: relative; top: 95px}

更新

正如其他善良的人所说，<content>不是有效的HTML5标签。也许这与特定问题无关，但请遵循他们的建议，避免自己创造标签。使用标准标签代替。

我认为你不应该鼓励原帖作者编写自己的自定义标签。 - Starx
4
@Starx：我并不鼓励任何事情。你和其他人说“不要使用<content>”是正确的，但这仍然不能解决OP的问题。 - Jon
在我看来，开始解决他的问题的道路，就是当他移除他的<content>标签时。 - Starx
2

遵循已有的HTML5标签。如果你要创建自己的标签，那么可能会产生后果。

请按照以下步骤操作。

<header>
</header>
<section>
</section>
<footer>
</footer>

要了解有效的HTML5标签，请访问此链接。

2
我曾经遇到过相同的问题，解决方法非常简单。只需使用 --> position: sticky; 即可。
2
And --> top: 0;并且 --> 顶部：0； - Victor Bonanho
1
欢迎来到Stackoverflow。请确保在编辑器中使用“花括号”工具对您的代码片段进行格式化，以获得更好的可读性。 - Omar Dulaimi
1

我最近在研究这个主题，通过检查Dropbox的招聘网站，我找到了一个实现方法。

他们在固定的header后面使用一个虚拟的div，并将该div的高度设置为与header相同。

个人而言，我更喜欢这种解决方案，因为：

  1. 更易于使虚拟的div在不同设备上与header高度一致。
  2. 我可以将content部分布局，就好像固定的头部不存在一样，这对我来说更有意义。

Here is a demo: 

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

header {
  position: fixed;
  width: 100%;
  height: 150px;
  background-color: aliceblue;
  opacity: 0.7;
}

section {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.header-dummy {
  height: 150px; /* this height SHOULD always be at least the same as header's */
  background-color: chartreuse;
}

#content {
  background-color: orange;
}

footer {
  background-color: dodgerblue;
}
<header>
  <section>
    <div>
      <span>HEADER TEXT</span>
    </div>
  </section>
</header>
<div class="header-dummy"></div>
<div id="content">
  <h3>Content are not Impacted</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <h3>Content are not Impacted</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <h3>Content are not Impacted</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <h3>Content are not Impacted</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <h3>Content are not Impacted</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <h3>Content are not Impacted</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <h3>Content are not Impacted</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <h3>Content are not Impacted</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<footer>
  <span>I'm just a footer</span>
</footer>

0

从这个问题中我所理解的是，您想要避免重叠的问题，您可以在您的div的CSS中使用z-index：

.example {
  position: absolute;
  z-index: -10;
}

*z-index属性只对定位元素(position:absolute, position:relative, 或 position:fixed)有效*

0
我假设你实际上不是指的<content>，因为那不是一个有效的HTML5标记。无论如何，你看到的问题是由于<header>元素的position:fixed指令引起的。尝试删除它并从那里开始。
0
如果其他解决方案无效，请检查您的背景/背景颜色是否为透明，并将其设置为白色。
0

我尝试了许多方法都不起作用，最后终于找到了。

.fixed-header{
     position: fixed;
     z-index: 1;        // Header comes front
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接