1.子绝父相
注意:子元素设置绝对定位,父元素可以设置相对定位、绝对定位、固定定位, 这三种情况,参照元素都是父元素**
<!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> .wrap { width: 300px; height: 300px; background-color: pink; /* position: relative; */ /* position: absolute; */ position: fixed; } .box1 { width: 100px; height: 100px; background-color: tomato; position: absolute; top: 100px; right: 50px; } </style> </head> <body> <!-- 这三种情况,子元素设置绝对定位,参照元素都是父元素 1.子绝父相(一般都用这个) 子元素设置绝对定位,父元素设置相对定位 2.子绝父绝 子元素设置绝对定位,父元素设置绝对定位 3.子绝父固 子元素设置绝对定位,父元素设置固定定位 --> <div class="wrap"> <div class="box1">box1</div> </div> </body> </html>