你是否曾经遇到过 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
。