CSS 子絕(position：absolute;)父相(position：relative)
阿新 • • 發佈：2020-07-24
首先你必須知道的是：top、right、bottom、left這四個屬性要生效的話,必須得設定相對定位/絕對定位，即position：relative;或者position：absolute;，也就是說top、right、bottom、left是為相對定位/絕對定位而生的。
子絕父相就是：子元素為絕對定位(position：absolute;)，父元素為相對定位position：relative;。例如A為子元素，那麼父元素B必須包含A，也就是說AB一定是巢狀關係(父子關係),不可以是兄弟關係。
A為瀏覽器(可以理解為視窗、可視區域、程式碼中的body標籤) 瀏覽器中有B， B嵌套了C，C嵌套了D，D設定了絕對定位： 情況一：如果B設定了相對定位，C也設定了相對定位，那麼在D中設定的位置(top\right\bottom\left)是相對於C來說的，此時和B一點關係都沒有 情況二：如果B設定了相對定位，C沒有設定相對定位，那麼在D中設定的位置(top\right\bottom\left)是相對B來說的，此時和C一點關係都沒有 情況三：如果B沒有設定相對定位，C設定了相對定位，那麼在D中設定的位置(top\right\bottom\left)是相對C來說的，此時和B一點關係都沒有 情況四：如果B沒有設定相對定位，C也沒有相對定位，那麼在D中設定的位置(top\right\bottom\left)是相對於瀏覽器A來說的。
總結：D設定的位置(top\right\bottom\left) 只和 距它最近的設定了相對定位的父類有關，如果父類沒有設定相對定位，則和瀏覽器(body標籤)產生關係。即：子絕父相符合就近原則
示例
情況一：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>子絕父相</title> <meta name="description" content="子絕父相測試" /> <meta name="Keywords" content="子絕父相測試" /> </head> <style type="text/css"> /*清除瀏覽器預設間距 */ * { margin: 0; padding: 0; } .b{ position: relative; background-color: red; width: 400px; height: 400px; margin: 100px 0px 0px 100px; /*解決外邊距塌陷的問題： 父元素巢狀子元素，子元素設定了上或下外邊距。 例如margin-top:10px或者margin-bottom:10px或者margin:10px 0 20px 0， 就會造成父元素也跟著子元素向下或者向上移動的問題，實際上父元素並沒有寫任何上或下外邊距邊距的程式碼。*/ overflow: hidden; } .c{ position: relative; background-color: blue; width: 200px; height: 200px; margin: 50px 0 0 50px; } .d{ position: absolute; background-color: orange; width: 40px; height: 40px; top:100px; left: 100px; } </style> <body> <div class="b"> <div class="c"> <div class="d"> 我是D </div> </div> </div> </body> </html>
情況二：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>子絕父相</title> <meta name="description" content="子絕父相測試" /> <meta name="Keywords" content="子絕父相測試" /> </head> <style type="text/css"> /*清除瀏覽器預設間距 */ * { margin: 0; padding: 0; } .b{ position: relative; background-color: red; width: 400px; height: 400px; margin: 100px 0px 0px 100px; /*解決外邊距塌陷的問題： 父元素巢狀子元素，子元素設定了上或下外邊距。 例如margin-top:10px或者margin-bottom:10px或者margin:10px 0 20px 0， 就會造成父元素也跟著子元素向下或者向上移動的問題，實際上父元素並沒有寫任何上或下外邊距邊距的程式碼。*/ overflow: hidden; } .c{ background-color: blue; width: 200px; height: 200px; margin: 50px 0 0 50px; } .d{ position: absolute; background-color: orange; width: 40px; height: 40px; top:100px; left: 100px; } </style> <body> <div class="b"> <div class="c"> <div class="d"> 我是D </div> </div> </div> </body> </html>
情況三：遵循就近原則，所以和情況1效果一樣。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>子絕父相</title> <meta name="description" content="子絕父相測試" /> <meta name="Keywords" content="子絕父相測試" /> </head> <style type="text/css"> /*清除瀏覽器預設間距 */ * { margin: 0; padding: 0; } .b{ background-color: red; width: 400px; height: 400px; margin: 100px 0px 0px 100px; /*解決外邊距塌陷的問題： 父元素巢狀子元素，子元素設定了上或下外邊距。 例如margin-top:10px或者margin-bottom:10px或者margin:10px 0 20px 0， 就會造成父元素也跟著子元素向下或者向上移動的問題，實際上父元素並沒有寫任何上或下外邊距邊距的程式碼。*/ overflow: hidden; } .c{ position: relative; background-color: blue; width: 200px; height: 200px; margin: 50px 0 0 50px; } .d{ position: absolute; background-color: orange; width: 40px; height: 40px; top:100px; left: 100px; } </style> <body> <div class="b"> <div class="c"> <div class="d"> 我是D </div> </div> </div> </body> </html>
情況四：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>子絕父相</title> <meta name="description" content="子絕父相測試" /> <meta name="Keywords" content="子絕父相測試" /> </head> <style type="text/css"> /*清除瀏覽器預設間距 */ * { margin: 0; padding: 0; } .b{ background-color: red; width: 400px; height: 400px; margin: 100px 0px 0px 100px; /*解決外邊距塌陷的問題： 父元素巢狀子元素，子元素設定了上或下外邊距。 例如margin-top:10px或者margin-bottom:10px或者margin:10px 0 20px 0， 就會造成父元素也跟著子元素向下或者向上移動的問題，實際上父元素並沒有寫任何上或下外邊距邊距的程式碼。*/ overflow: hidden; } .c{ background-color: blue; width: 200px; height: 200px; margin: 50px 0 0 50px; } .d{ position: absolute; background-color: orange; width: 40px; height: 40px; top:100px; left: 100px; } </style> <body> <div class="b"> <div class="c"> <div class="d"> 我是D </div> </div> </div> </body> </html>