設定絕對定位對於子元素繼承父元素的高度的影響
阿新 • • 發佈：2018-12-05
筆者在寫網頁時，發現一個問題，當一個父元素沒有設定高度，而全靠子元素1撐起高度時，此時子元素2就無法繼承父元素的100%高度，程式碼如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ padding: 0; margin: 0; } .box{ width: 300px; } .box img{ /*父盒子靠img撐起高度*/ width: 300px; } .cover{ width: 100%; /*設定子盒子繼承父盒子的100%高度*/ height: 100%; background: rgba(0,0,0,0.5); /*position: absolute;*/ /*left: 0;*/ /*top: 0;*/ } </style> </head> <body> <div class="box"> <img src="images/0.jpg" alt=""> <div class="cover"></div> </div> <script> </script> </body> </html>
此時子盒子的高度為0；
效果如下：
接著筆者利用子絕父相原理，設定子盒子為絕對定位，父盒子為相對定位，結果，子盒子能繼承父盒子被撐起的高度了，程式碼如下：
*{ padding: 0; margin: 0; } .box{ width: 300px; /**相對定位**/ position: relative; } .box img{ /*父盒子靠img撐起高度*/ width: 300px; } .cover{ width: 100%; /*設定子盒子繼承父盒子的100%高度*/ height: 100%; background: rgba(0,0,0,0.5); /*設定定位為絕對定位，脫離標準流*/ position: absolute; left: 0; top: 0; }
效果圖如下：
總結：子盒子脫離標準流，子盒子以1個局外人的身份去繼承父盒子的高度，而子盒子在同一個標準流時，無法繼承父盒子被其他盒子撐起來的高度。