position：staticに設定すると、フッターの背景がRGBA透明度を失うのはなぜですか？

Question

背景がRGBAの色を使用して透明になるようにフッター要素のスタイルを設定しようとしています。要素がposition: absoluteに設定されている場合、透明度は正常に機能しますが、position: staticに設定すると透明度が失われます。

私はと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のtransparancyに影響を与えない位置： 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>

位置を静的に設定するとき、下にある要素の背景が白でないことを確認してください。