CSS div（位置の相対）は別のdivを無視します（位置：絶対）

Question

スクロールしない固定ヘッダー領域（「top_box」）とスクロール可能なコンテンツ領域（「middle_box」）を使用してサイトを構築しようとしています。

top_boxはposition：absoluteです。 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を2番目のボックスに付ける必要がありますか？

#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を以下のように変更する必要があります。

あなたのケースでは、#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>

Answer 5

私は実際にuはスクロール可能なコンテンツ領域について、何を意味するのか分かりません。オーバーフローしたコンテンツがある場合は、スクロールするセクションだと思います。そのスクロール可能なコンテンツがオーバーフロースクロールを望むならば。あなたはポジションを使わずにこれを行うことができます。コンテンツをオーバーフローさせるときにスクロールするように、中央のボックス％を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>