Почему один div позиционирует себя выше и под другим div?

Question

Сверху вниз у меня есть обертка div, hdr div, div-контейнер-ползунок и контейнер body-container. Кажется, это периодическая проблема, потому что когда я обновляю экран, проблема исправляется. Поддон кузова-контейнера скользит под контейнером-ползунком. Ползунок по-прежнему виден сверху, но он покрывает весь текст в контейнере для тела, вплоть до того, что он просто превысил «Обеспечение безопасности и качества». Ссылка [http://infinitywellcontrol.com/][1]

#wrapper { 
background: #fae7ce; 
width: 100%;  
margin-left: auto; 
margin-right: auto; } 

#hdr { 
height: 100px; 
width: 100%; 
margin: 0 auto; 
padding: 0px; } 

#slider-container { 
width: 100%; 
height: auto; 
background: #484848; 
border-top: 1px solid #777777; 
border-bottom: 1px solid #777777; } 

#body-container { 
width: 1050px; 
color: #484848; 
line-height: 150%; 
margin: 45px auto 150px auto; 
background: #fae7ce; 
display: table; } 


<div id="hdr"> 
    <div id="hdr-content"> 
     <div id="hdr-left"> 
      <a href="index.html"><img src="images/logo.jpg" 
width="510" height="90" alt="frac valve rental and repair services"></a> 
     </div> 
     <div id="hdr-right"> 
      <div id="hdr-nav"> 
      <div style="position: relative; z-index: 999;"> 
       <ul id="menu"> 
        <li><a href="index.html">Home</a></li> 
        <li><a href="#">Services</a> 
        <ul> 
         <li><a href="repairs.html">Repairs</a></li> 
         <li><a href="rentals.html">Rentals</a></li> 
         <li><a href="maintenance.html">Maintenance</a></li> 
         <li><a href="weld-repairs.html">Weld Repairs</a></li> 
        </ul> 
        </li> 
      <li><a href="quality-assurance.html">Quality Assurance</a></li> 
      <li><a href="contact.html">Contact</a></li> 
      </ul> 
         </div> 
        </div> 
      </div> 

     </div> 
</div> 

<div id="slider-container"> 
    <div id="fade"> 
     <img src="images/frac-valve-service1.jpg" width="1920" 
height="auto" alt="frac valve repair service south texas"> 
     <img src="images/frac-valve-service2.jpg" width="1920" height="auto" alt="frac valve repair service corpus christi"> 
     <img src="images/frac-valve-service3.jpg" width="1920" height="auto" alt="frac valve repair service orange grove"> 
     <img src="images/frac-valve-service4.jpg" width="1920" height="auto" alt="frac valve repair service oil and petroleum industry"> 
    </div> 
</div> 


<div id="body-container"> 
     ........ 

Answer 1

Ваша проблема заключается в # слайдера-контейнер (он имеет высоту 2px).

У вас есть 2 варианта:

1) Добавить высоту # слайдера-контейнер (например, 500px)

2) Добавить обивка-топ: 500px на # тела-контейнера (лучший вариант, на мой взгляд)

Answer 2

Все элементы внутри элемента #fade имеют свойство CSS position, установленное в absolute. Проверьте определение MDN:

абсолютный

Не оставляйте пространство для элемента. Вместо этого поместите его в заданное положение относительно его ближайшего расположенного предка или к содержащему блоку. Абсолютно позиционированные поля могут иметь поля, они не сжимаются с любыми другими полями.

Это означает, что height: auto установить в элемент #slider-container не будет работать, как задумано, потому что внутренние элементы не имеют фиксированную высоту сами по себе, что означает, что они не будут расширять емкость.

Дополнительную информацию см. На странице MDN о собственности height. Начальное значение свойства - auto, поэтому вы можете сохранить некоторый код, не добавляя его к каждому элементу.

Поскольку мы знаем, что каждое изображение внутри карусели имеют фиксированную высоту 500px, мы можем решить эту проблему с одним свойством:

#slider-container {height: 500px}