Question

在下文中，如果我使用Top的百分比值，则不会重新定位em。如果我使用px，它工作正常。为什么呢？

我在w3中对此进行了研究，但没有找到使用百分比值的任何资格。定位上下文是p - 因为它的相对定位 - 它应该具有从行框得到的高度。

编辑：为了清楚，我意识到了解决方法，但我正在努力理解规范。到目前为止，我的经验是，即使不是很明显，也存在一些逻辑。我对这个问题的目的是找出将此行为与可视化格式化模型中的指定行为进行协调的逻辑。

HTML

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style>
        body {
            font-size: x-small;
        }
        div{
            outline: 1px solid red;
            background-color: silver;
            overflow: visible;
        }

        #test em {
            position: relative;
            color: red;
            bottom: -10%;
        }
    </style>
</head>
<body>
    <div id="test">
        <p>Lorem ipsum sit amet, <em>duo ut dicant expetenda</em>. Laudem maiestatis eam et. Lucilius patrioque instructior et has. Sea at zril affert, mea accusam nominavi officiis te. Ad nam tota quidam mandamus, pro <em>dolor</em> veri volumus torquatos an.</p>
    </div>
</body>
</html>

Answer 1

@Cool Blue，

您对规范的阅读是正确的。由top定义的定位元素的偏移量是基于该元素的包含块（在这种情况下由<p>生成）的高度来计算的。但是，您遇到的问题似乎是浏览器计算height属性的一个众所周知问题的变体。 This problem typically occurs when we are trying to create an element that takes up the full-height of the viewport。

问题在于，除非您为页面上的元素指定绝对height，否则浏览器不必费心计算元素的高度。相反，浏览器允许内容在视口宽度内流动，直到视口结束。因此，如果您在top: X%上设置<em>，并且包含的元素包含height: auto，则浏览器不执行任何操作。如果您要使用top的百分比值（如果您只想在整个元素树中使用百分比），则必须将每个祖先的height设置为合适的百分比。

HERE是一种仅使用百分比的解决方案。请注意，效果有点不均匀，因为更改视口大小会更改<em>相对于<p>内文本的偏移量。因此，虽然这是一个有趣的理论讨论，但从设计角度设置top可能更好。

相对定位Top with percentage不适用于内联元素

1 个答案: