Question

我的页面顶部有一个header。我的页面内容很长，因此垂直滚动条会显示出来。在我的标题下方，我container内的第一个文字并不完全可见（部分隐藏在固定标题中）。

如何解决？

感谢。

＆＃13;

header {
  background-color: lightgray;
  position: fixed;
  top: 0px;
  width: 100%;
}
.container {
  
}

＆＃13;

<header>
Hello, I am the header
</header>
<div class="container">
  Hello I am the content of the page <br/>  
  Hello I am the content of the page <br/>  
  Hello I am the content of the page <br/>  
  Hello I am the content of the page <br/>  
  Hello I am the content of the page <br/>  
  Hello I am the content of the page <br/>  
  Hello I am the content of the page <br/>  
  Hello I am the content of the page <br/>  
  Hello I am the content of the page <br/>  
  Hello I am the content of the page <br/>  
  Hello I am the content of the page <br/>  
  Hello I am the content of the page <br/>  
  Hello I am the content of the page <br/>  
  Hello I am the content of the page <br/>  
  Hello I am the content of the page <br/>  
  Hello I am the content of the page <br/>  
  Hello I am the content of the page <br/>  
  Hello I am the content of the page <br/>  
  Hello I am the content of the page <br/>  
  Hello I am the content of the page <br/>  
  Hello I am the content of the page <br/>  
  Hello I am the content of the page <br/>  
  Hello I am the content of the page <br/>  
  Hello I am the content of the page <br/>  
  Hello I am the content of the page <br/>  
  Hello I am the content of the page <br/>  
  Hello I am the content of the page <br/>  
  Hello I am the content of the page <br/>  
  Hello I am the content of the page <br/>  
  Hello I am the content of the page <br/>  
  Hello I am the content of the page <br/>  
  Hello I am the content of the page <br/>  
  Hello I am the content of the page <br/>  
  Hello I am the content of the page <br/>  
</div>

＆＃13;

Answer 1

由于您的标题为fixed，因此会将其放置在＆＃34;以上＆＃34;视口，在文档流程之外。

margin-top上的.container将无效，因为保证金没有任何内容可以在＆＃39;上反弹。相反，在你的身体上使用填充物。

body {
    padding-top: 30px;
}

DEMO

Answer 2

这是因为你的标题不在流程中。

您必须在内容中添加padding-top，等于标题的高度。

Answer 3

这是因为你从DOM FLOW中抓取了一个固定的或绝对的元素 - ＆gt;绝对或固定的元素也总是位于静态或阻塞的上面。

如果你想避免这种情况，请给你的div填充。

Answer 4

http://jsfiddle.net/zander_pope/v2rjuw51/ 这是修复。您可以尝试使用margin-top到内容或尝试从固定位置更改为相对

header {
  background-color: lightgray;
  position: fixed;
  top: 0;
    left:0;
  width: 100%;
    height:20px;
}
.container {
  margin-top:100px;
}

<header>
Hello, I am the header
</header>
<div class="container">
  Hello I am the content of the page <br/>  
  Hello I am the content of the page <br/>  
  Hello I am the content of the page <br/>  
  Hello I am the content of the page <br/>  
  Hello I am the content of the page <br/>  
  Hello I am the content of the page <br/>  
  Hello I am the content of the page <br/>  
  Hello I am the content of the page <br/>  
  Hello I am the content of the page <br/>  
  Hello I am the content of the page <br/>  
  Hello I am the content of the page <br/>  
  Hello I am the content of the page <br/>  
  Hello I am the content of the page <br/>  
  Hello I am the content of the page <br/>  
  Hello I am the content of the page <br/>  
  Hello I am the content of the page <br/>  
  Hello I am the content of the page <br/>  
  Hello I am the content of the page <br/>  
  Hello I am the content of the page <br/>  
  Hello I am the content of the page <br/>  
  Hello I am the content of the page <br/>  
  Hello I am the content of the page <br/>  
  Hello I am the content of the page <br/>  
  Hello I am the content of the page <br/>  
  Hello I am the content of the page <br/>  
  Hello I am the content of the page <br/>  
  Hello I am the content of the page <br/>  
  Hello I am the content of the page <br/>  
  Hello I am the content of the page <br/>  
  Hello I am the content of the page <br/>  
  Hello I am the content of the page <br/>  
  Hello I am the content of the page <br/>  
  Hello I am the content of the page <br/>  
  Hello I am the content of the page <br/>  
</div>

我的标题部分隐藏了以下内容

4 个答案: