Почему фона нижнего колонтитула теряют прозрачность 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">+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>

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