为什么一个div将自己定位在另一个div的下方？

Question

从上到下，我有一个包装div，一个hdr div，一个slider-container div和一个body-container div。这似乎是一个间歇性的问题，因为当我刷新屏幕时，问题自行解决。滑动器容器div下面的body-container div。滑块在顶部仍然可见，但是它覆盖了身体容器中的所有文本，一直到完成“安全和质量保证”。网址是[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的高度）。

你有两个选择：

1）增加高度，以＃滑盖容器（例如500像素）

2）添加填充顶：500px的，以＃体容器（更好的选择，在我看来）

Answer 2

元素#fade中的所有元素的CSS属性position设置为absolute。检查MDN定义：

绝对

不要为元素留出空间。相反，将它定位在相对于其最接近的定位祖先或包含块的指定位置。绝对定位的盒子可以有边距，它们不会与其他边缘一起折叠。

这意味着，按预期设置到元素#slider-container的height: auto将无法​​正常工作，因为内部的元素没有自己固定的高度，这意味着他们将不会展开容器。

有关其他信息，请查看有关属性height的MDN页面。该属性的初始值为auto，因此您可以通过不将其添加到每个元素来保存一些代码。

因为我们知道您的转盘内的每个图像有500像素一个固定的高度，我们可以修正与单个属性问题：

#slider-container {height: 500px}