您是否曾经遇到过 CSS 定位困境，即带有 position: absolute 的元素没有按预期进行定位？
我们知道，在元素上设置绝对位置将使其相对于最近的祖先进行定位，最近的祖先将其 position 设置为 static 以外的值(默认值)。
在上图中，绝对定位元素在两个示例中都使用相同的 CSS 定位：
.absolute {
position: absolute;
top: 100%;
left: 0;
}但在每个例子中，结果都不一样。这是因为在第一个示例中，它的父元素(粉色元素)具有 position: relative，而在第二个示例中，它是另一个具有相对位置的祖先(灰色元素)。
值得注意的是，如果没有定位祖先，那么带有
position: absolute的元素将相对于<body>放置。
在这样一个相对简单的示例中，快速检查 CSS 可以很容易地确定哪个祖先具有相对位置，如果样式没有达到预期效果，我们可以相应地调整样式。但有时，在更复杂的代码库中(尤其是在有大量嵌套元素的情况下)，查找元素的哪个祖先具有相对定位可能会有点困难。
在构建复杂的全宽下拉子菜单的标题时，这种情况最常见：我通常需要将它们相对于整个标题进行定位，但在某个地方我无意中在其他元素上设置了 position: relative，这会破坏所需的行为。
浏览所有代码很费时间，有一种简单的方法可以在 JavaScript 中找到最近的父级 —— 我们可以在浏览器控制台中正确地找到。
在 Chrome 和 Firefox 中，如果我们打开开发工具中的 Console 选项卡，我们可以通过键入$0 来获取当前选中的元素。然后，我们可以使用 offsetParent 对象属性来查找 position 设置为 static 以外的元素的最近祖先。
尝试选择一个元素(Ctrl + shift + c)并将其键入控制台：
$0.offsetParent键入之后，它将返回我们选中的元素。
接下来，我们可以使用 getComputedStyle 来找出元素的 position 属性的值：
getComputedStyle($0.offsetParent).position还有一种更加快速的方法，我们还可以使用 $_ 对上次执行的结果进行引用：
> $0.offsetParent // <div class="trans-right">...</div>
> $_ //<div class="trans-right">...</div>
> getComputedStyle($0.offsetParent).position // "relative"
> $_ // relative通过在控制台中键入 $_ 我们可以将最近计算的表达式作为变量进行检索，这也可以加快检索速度：
> $0.offsetParent // <div class="trans-right">...</div>
> getComputedStyle($_).position // "relative"上面代码将检索其 position 值。
注意：使用
offsetParent时，如果元素的position设置为fixed或其本身或其父元素的display: none将返回null。
扫一扫
893
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
