CSS＆＃39; top＆＃39;没有将元素推到屏幕上

时间：2015-11-19 16:05:03

标签： css position

我试图（几乎）将容器垂直放在屏幕上。为此，我将其定位为relative并使用top: 40%;和transform: translateY(-50%);的组合。

麻烦的是，top不起作用（就像没有将容器推到页面上一样），但是如果我检查Firebug或Chrome中的元素，我可以看到相当于40％已添加到容器的顶部。如果我只需单击该值并按Enter键，则更改将反映在页面上。

所以我的问题是，即使top似乎正确计算，为什么这不起作用？

这是我的CSS - 

body:not(.mobile) #login{
    padding:            0 0 40px;
    top:                40%;
    -webkit-transform:  translateY(-50%);
    -ms-transform:      translateY(-50%);
    transform:          translateY(-50%);
}
#login{
    position:   relative;
    z-index:    10;
}

以下是HTML呈现的方式

<body class="login login-action-login wp-core-ui locale-en-gb">

    <div id="login">

        { Login form goes here }

    </div>
    <div class="clear"></div>

</body>

以下是显示问题的屏幕截图

enter image description here

1 个答案:

答案 0 :(得分：2)

这个CSS会修复它：

body:not(.mobile) #login{
    padding:            0 0 40px;
    top:                40%;
}
#login{
    position:   absolute;
    z-index:    10;
}

编辑：你可以看到它在这个js小提琴上工作：https://jsfiddle.net/7h0nz7nz/

相关问题
最新问题