<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .father { position: relative; width: 400px; height: 400px; background-color: pink; } .son { /* 相对, 绝对 */ /* 父级相对定位; 子级绝对定位 -- 子绝父相 */ /* position: relative; */ /* position: absolute; */ /* right: 100px; */ width: 300px; height: 300px; background-color: skyblue; } .sun { position: absolute; /* left: 20px; top: 30px; */ right: 20px; bottom: 50px; width: 200px; height: 200px; background-color: green; } /* 绝对定位查找父级的方式: 就近找定位的父级, 如果逐层查找不到这样的父级, 就以浏览器窗口为参照进行定位 */ </style> </head> <body> <div class="father"> <div class="son"> <div class="sun"></div> </div> </div> </body> </html>
