一切都在我的问题中:是否可能有一个父亲div
和position: fixed
,一个孩子div
以及一个position: fixed
,高于孩子的孩子?
这种情况在下面的图片中,并在下面的代码段中进行了详细说明(该代码段显示在整页中以使其正常运行):
div
:虚线框div
:边界为纯黑色的外部正方形
html, body {
margin: 0;
padding: 0;
}
body {
position: relative;
}
.selection {
position: fixed;
height: 10vh;
width: 10vh;
top: 35vh;
left: 40vw;
border: 1px dashed #000;
}
.root {
position: fixed;
border: 1px solid #000;
top: 5vh;
left: 5vw;
height: 90vh;
width: 90vw;
display: flex;
justify-content: center;
align-items: center;
}
.scene {
position: relative;
height: 20vh;
width: 20vh;
background: red;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<script src="main.js"></script>
</head>
<body>
<div class="selection">
<div class="root">
<div class="scene">
<div class="element">
</div>
</div>
</div>
</div>
</body>
</html>
对于那些有兴趣的人,我正在寻找解决该问题的方法,因为感谢Intersection Observer API,我试图创建一个“选择” div,它说:根观察者必须是被观察目标的祖先