首先你必須知道的是：top、right、bottom、left這四個屬性要生效的話,必須得設置相對定位/絕對定位，即position：relative;或者position：absolute;，也就是說top、right、bottom、left是為相對定位/絕對定位而生的。
子絕父相就是：子元素為絕對定位(position：absolute;)，父元素為相對定位position：relative（relative、absolute、fixed都可以：絕對定位的盒子是相對於離它最近的一個已定位的盒子進行定位的）;。例如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>
