带有百分比值的 CSS top 属性不起作用
CSS：
.header{
position: absolute;
top: 50%;
left: calc(50% - 200px);
opacity: 0.9;
color: #ffffff;
font-size: 35px;
text-shadow: 2px 2px 5px #000000;
}
HTML：
<body>
<div class="background"></div>
<div style="position: relative">
<div class="header"><label>A+ CMS</label></div>
</div>
</body>
输出：
该left属性已正常工作，但top属性没有。我将 50% 设置为top但“A+ CMS”这个词一直挂在屏幕顶部。
如果我将 的值top从百分比更改为px，它会起作用。为什么？
那是因为它距离容器顶部的 10%，当前是文本的高度，所以它不会移动。
如果您向容器添加高度属性，则顶部属性将起作用。这是一个例子：http : //jsfiddle.net/bncteqzv/
.header{
position: absolute;
top: 10%;
left: calc(50% - 200px);
opacity: 0.9;
color: #ffffff;
font-size: 35px;
text-shadow: 2px 2px 5px #000000;
}
.test {
height: 500px;
}<body>
<div class="background"></div>
<div class="test" style="position: relative">
<div class="header"><label>A+ CMS</label></div>
</div>
</body>