Question

从上到下，我有一个包装器div，一个hdr div，一个滑块容器div和一个body-container div。这似乎是一个间歇性的问题，因为当我刷新屏幕时，问题就会解决。主体容器div在滑块容器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

您的问题出在#slip-container（它的高度为2px）。

您有两个选择：

1）向＃slider-container（例如500px）添加高度

2）添加填充顶部：500px到＃body-container（在我看来更好的选择）

Answer 2

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

<强>绝对

不要为元素留出空间。相反，将其定位在相对于其最近定位的祖先或包含块的指定位置。绝对定位的盒子可以有边距，它们不会随着任何其他边缘而崩溃。

这意味着您在元素height: auto中设置的#slider-container将无法正常工作，因为内部元素本身没有固定的高度，这意味着它们不会扩展容器

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

由于我们知道您的旋转木马内的每个图像都有 500px 的固定高度，因此我们可以使用单个属性解决问题：

#slider-container {height: 500px}

为什么一个div将自己定位得更高并位于另一个div之下？

2 个答案: