Почему фон нижнего колонтитула теряет прозрачность RGBA при установке в положение: статический?

Question

Я пытаюсь стилизовать элемент нижнего колонтитула, чтобы фон был прозрачным с использованием цветов RGBA. Когда элемент установлен в position: absolute прозрачность работает нормально, но когда установлено position: static прозрачность потеряна.

Я пытался нацеливаться на .footerDiv так же как footer.footerDiv и также попытался установить белый прозрачный фон, но не мог заставить что-либо работать.

Я использую Zurb Foundation 6 в качестве основы. Я исследовал и попробовал несколько разных скрипок, но безрезультатно. Любая помощь будет принята с благодарностью, так как мне нужно, чтобы нижний колонтитул оставался статичным, чтобы реагировать на экран разных размеров. Заранее спасибо.

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">[phone]</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>

Вы уверены, что фон элемента под ним не белый при установке статического положения?