50
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>参考点 (1个定位流)多个祖辈元素</title><style> * {margin: 0;padding: 0;}.box1 {width: 400px;height: 400px;background-color: red;position: fixed;}.box2 {width: 300px;height: 300px;background-color: green;/*position: absolute;*/}.box3 {width: 200px;height: 200px;background-color: blue;/*box 1 2 3 三个祖辈元素中的任意一个加了定位流以后, box4 就不再以body为参考点了，而是以三个祖辈元素中有定位流的那个祖辈元素座位表参考点*//*position: relative;*/}.box4 {width: 100px;height: 100px;background-color: aqua;/* box1 2 3 三个祖辈元素中没有定位流, 所以当前元素的定位参考点是 body这里说的定位流指的是 相对定位 绝对定位 固定定位 */position: absolute;left: 0;bottom: 0;}</style>
</head>
<body><div class="box1"><div class="box2"><div class="box3"><div class="box4"></div></div></div></div>
</body>
</html>上述运行结果：