本文主要是介绍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>
上述运行结果:
这篇关于50-(定位相关)参考点 (多个定位流)多个祖辈元素的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!