CSS div（位置相对）忽略另一个div（位置：绝对）

Question

尝试使用固定的非滚动标题区（称为“top_box”）和可滚动内容区（称为“middle_box”）来构建网站。

top_box是位置：绝对。 middle_box是位置：相对。

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之下任何想法？

Answer 1

为什么你必须给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>

Answer 2

#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; 
} 

Answer 3

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>

Answer 4

的问题是，position: fixed或position:absolute需要在div退出该流程。因为你的相对 div不会注意到上面已经有一个。所以它会被放在最上面。

为了实现你想要的，你必须改变你的CSS如下。

我给自己定的内容，你的情况DIV #middle_box到height: 1000px，所以你可以看到，内容区滚动和你的其他分区#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>

Answer 5

我不知道究竟是什么ü意味着关于滚动内容区域。我认为你的意思是当内容溢出时它是一个滚动部分。如果该可滚动内容意味着您想要溢出滚动。你可以在不使用位置的情况下做到这点我将中间框％更改为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>