CSS div (position relative) игнорирует другой div (позиция: абсолютный)

Question

Попытка создать сайт с фиксированной областью заголовка без прокрутки (называемой «top_box») и прокручиваемой областью содержимого (называемой «middle_box»).

Top_box is position: absolute. Средний адрес: позиция.

Среднее значение «игнорирует» 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 следующим образом.

Я установил содержание, в вашем случае сОн #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

Я не знаю, что на самом деле и означает о прокрутке области содержимого. Я думаю, вы имеете в виду, что это раздел прокрутки, когда есть содержимое переполнения. Если это прокручиваемое содержимое означает, что вы хотите прокрутку переполнения. Вы можете сделать это без использования позиции. Я меняю средний квадрат% на 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>