Question

绝对定位元素忽略“顶部”位置的百分比可能是什么原因？百分比适用于“左”，我可以使用像素和vh垂直定位，而不是百分比。

Answer 1

这是因为你必须制作绝对元素的父元素 - ＆＃34; position：relative＆＃34;。那么绝对元素的顶部和左侧字段将获得相对于父级的应用值。

Answer 2

您需要为其父元素定义布局。

布局可能不是“静态”，如“固定”，“绝对”，“相对”

这将有助于浏览器了解百分比的计算需要在实际中对其父级进行，而不是窗口大小。

Answer 3

事实证明，有多种方法可以绝对定位元素。以下是不使用父DIV的一种方法：

CSS：

   html,body {
    width:100%;
    height:100%;
    background:red;
   }
    .centered-axis-xy {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);

} 
div.cyan5050 {
    width:50%;height:50%;
    background:cyan;
}
div p {
    width:100%;
    height:50%;
    margin-top: 20vh;
    text-align:center;
}

HTML：

<div class="cyan5050 centered-axis-xy">
        <p>Content to Display</p>
</div>

见fiddle

通常，如果使用百分比，则需要为DIV标记的百分比提供基础，即包含外部DIV的高度和宽度百分比，或者相对于html和body元素。但是，在这种情况下，由于CSS包含了here提到的响应式定位技术，因为CSS转换配备了translate（）function，所以html和body元素的百分比是可选的。 / p>

绝对定位元素 - 最高百分比不起作用

3 个答案: