尝试建立一个固定的，不可滚动的页眉区域(称为"top_box")和可滚动的内容区域(称为"middle_box")。
top_box是position: absolute。middle_box是position: relative.
middle_box将"忽略"top_box，并显示在top_box的上方，而不是在其下方。
#top_box {
position: fixed !important;
position: absolute;
top: 2%;
height: 20%;
}
#middle_box {
position: relative;
height: 70%;
overflow: auto;
}<div id="top_box">
...
</div>
<div id="middle_box">
...
</div>你知道为什么middle_box忽略了top_box并从屏幕顶部开始，而不是从top_box下面开始吗?
问题是position: fixed或position:absolute将div从流中取出。因此，您的相对div不会注意到上面已经有一个。所以它会被放在最上面。
要实现你想要的，你必须改变你的CSS如下。
我已经设置了内容，在你的例子中，div #middle_box为height: 1000px，所以你可以看到内容区域是可滚动的，而你的另一个div #top_box留在顶部。
body {
margin: 0;
}
#top_box {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 20%;
background: #eee;
z-index: 100;
}
#middle_box {
position: absolute;
top: 20%;
left: 0;
width: 100%;
height: 1000px;
background: rgba(0, 0, 0, 0.3);
}<div id="top_box">
top_box
</div>
<div id="middle_box">
middle_box
</div>为什么要给第二个盒子position:relative ?
#top_box {
position: absolute;
top: 2%;
height: 20%;
background:red;
}
#middle_box {
position: absolute;
top:20%;
height: 70%;
background:blue;
}<div id="top_box">
TOP
</div>
<div id="middle_box">
BOTTOM
</div>#top_box{
position: fixed;
top: 2%;
height: 20%;
overflow: hidden;
}
#middle_box
{
position: fixed;
top: 22%; /* this should set to 22%-30% depending at where do you want it*/
height: 70%;
overflow: auto;
}
fixed !important;优先于absolute
也在下面，但它不会，因为它将在父元素中开始，而不是在
下面#top_box {
position: absolute;
top: 2%;
height: 20%;
background-color: yellow;
}
#middle_box {
position: relative;
height: 70%;
overflow: auto;
background-color: blue;
}<div id="top_box">
Lorem Ipsum 1
</div>
<div id="middle_box">
Lorem Ipsum 2
</div>我不知道你说的可滚动内容区是什么意思。我想你的意思是，当有溢出内容时，它是一个滚动部分。如果可滚动的内容意味着你想要一个溢出滚动。你可以不用位置来做这个。我将中间的框%改为px，以便在溢出内容时滚动。有任何问题，请在评论中问我，谢谢。
#top_box {
text-align: center;
height: 20%;
border: 1px solid blue;
}
#middle_box {
overflow: auto;
height: 280px; /*change the height otherwise 70% will never scroll that content*/
background: red;
border: 1px solid black;
color: white;
text-align: justify;
padding:0 10px;
}
h1.tittle {
text-align: center;
}
#footer_box {
border: 1px solid yellow;
text-align: center;
}<div id="top_box">
<h1>
Non-scroll Top Header area
</h1>
</div>
<div id="middle_box">
<h1 class="tittle">
Scrolling Header
</h1> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer
took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset
sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing
and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the
leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including
versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a
type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more
recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with
the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem
Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,
remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum
is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived
not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software
like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of
type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing
Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy
text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised
in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic
typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem
Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived
not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software
like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of
type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing
Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
<div id="footer_box">
<h1>Footer area</h1>
</div>