css - 为什么我的页脚背景在设置为位置 :static? 时会失去 RGBA 透明度

Question

我正在尝试设置页脚元素的样式，以便使用 RGBA 颜色使背景透明。当元素设置为position: absolute时透明度工作正常，但设置为 position: static 时透明度丢失。

我试过定位 .footerDiv以及footer.footerDiv还尝试设置白色透明背景，但无法正常工作。

我使用 Zurb Foundation 6 作为我的框架。我研究并尝试了一些不同的 fiddle ，但无济于事。任何帮助将不胜感激，因为我需要页脚保持静态以保持对不同屏幕尺寸的响应。提前致谢。

HTML:

<footer class="footerDiv">
    <div class="row" data-equalizer data-equalize-on="medium">
         <div class="small-12 medium-4 large-4 columns text-center col1" data-equalizer-watch>
            <img class="jamboHealth" src="../assets/img/assetLogos/health.svg" alt="Jambo Health Logo">
            <img class="jamboConstruct" src="../assets/img/assetLogos/construction.svg" alt="Jambo Construction Logo">
            <img class="jamboDigi" src="../assets/img/assetLogos/digital.svg" alt="Jambo Digital Logo">
            <p class="text-center">0845 424 9753</p>
            <div class="divideAlign">
            </div>
          </div>
        <!--col1-->

        <div class="small-12 medium-4 large-4 columns text-center col2" data-equalizer-watch>
           <img class="jamboEdu" src="../assets/img/assetLogos/education.svg" alt="Jambo Education Logo">
           <img class="jamboManu" src="../assets/img/assetLogos/manufacturing.svg" alt="Jambo Manufacturing Logo">
           <p class="text-center">01872 22 33 66</p>
           <div class="divider">
           </div>
        </div>
        <!--col2-->

        <div class="small-12 medium-4 large-4 columns text-center col3" data-equalizer-watch>
           <img class="jamboInt" src="../assets/img/assetLogos/international.svg" alt="Jambo International Logo">
           <p class="text-center">+44161 393 708</p>
           <div class="divider">
           </div>
        </div>
        <!--col3-->
    </div>
    <!--row-->
</footer>

CSS:

footer {
background: rgba(255,255,255,0.7);
position: static;
bottom: 0;
padding-top: 1rem;
width: 100%;
}

Answer 1

位置不影响 RGBA 透明度，看这段代码: https://jsfiddle.net/y8hwqq2m/3/

body {
  background-color: red;
}
footer {
  background: rgba(255, 255, 255, 0.7);
  bottom: 0;
  padding-top: 1rem;
  width: 100%;
}
.footerDiv {
  position: absolute;
}
.footerDiv2 {
  position: static;
}

<footer class="footerDiv">
  <div class="row" data-equalizer data-equalize-on="medium">
    <div class="small-12 medium-4 large-4 columns text-center col1" data-equalizer-watch>
      Some content positioned: absolute;
    </div>
  </div>
</footer>
<footer class="footerDiv2">
  <div class="row" data-equalizer data-equalize-on="medium">
    <div class="small-12 medium-4 large-4 columns text-center col1" data-equalizer-watch>
      Some content positioned: static;
    </div>
  </div>
</footer>

您确定将位置设置为静态时下方元素的背景不是白色吗？