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>