設定絕對定位對於子元素繼承父元素的高度的影響
阿新 • • 發佈: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個局外人的身份去繼承父盒子的高度,而子盒子在同一個標準流時,無法繼承父盒子被其他盒子撐起來的高度。