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

问题描述：

绝对定位元素可能会忽略“最高”位置百分比的原因是什么？百分比适用于“左”，我可以使用像素和vh垂直放置它，而不是百分比。绝对定位元素 - 最高百分比不起作用

您可能在路上或某物上有不可见的固定元素。我们可以看看代码吗？ – 2017-05-27 09:13:02

没有任何代码显示您的问题，很难猜测:) –

以下是您可能会发现与解决该问题有关的内容：https://stackoverflow.com/questions/28238042/setting-css-top-percent-not-working-如预期的 – slevy1

答

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

不是父母。该元素相对于其第一个定位的（非静态的）祖先元素进行定位。 – HTCom

答

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

布局可能比“静态”像“固定”，其他的“绝对”，“相对”

这将有助于浏览器了解这一比例的计算中，需要在维吾尔语做它的父，而不是窗口大小。

答

事实证明，有多种方法可以绝对定位元素。这是不使用父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或其他resp的高度和宽度百分比等HTML和body元素。但是，在这种情况下，由于CSS包含了一个响应式定位技术here，所以html和body元素的百分比是可选的，这要归功于CSS转换配备了translate（）function。

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

相关推荐