Question

<html>
<head>
<style>
#mainbody, #mainbodyloginpage {
    left: 35%;
    position: relative;
    width: 40%;
}
#mainbodyloginpage {
    top: 55%;
}
</style>
</head>
<body>
 <div id="mainbodyloginpage">
..
..

.. [此处未应用的顶级属性] ..

 </div>
 </body>
</html>

任何想法为什么没有应用top属性，应用其他属性如左。？

更新:: 一改变

top: 55%;

到

top: 20px;

它有效。但我不想将它硬化为固定值。有人知道这里发生了什么吗？

UPDATE2 :: 这段代码在IE中工作得很好，但在firefox / chrome中却没有。即chrome和firefox忽略顶部属性设置为百分比。 IE确实尊重它。

Answer 1

您需要专门设置位置：相对位置：静态是默认值。 top / left / etc对静态位置元素没有任何影响。

Answer 2

您可以尝试将position设置为absolute。

不知道你的场景中是否要绝对，但工作正常：http://jsfiddle.net/UL5pD/

#mainbody, #mainbodyloginpage {
    left: 35%;
    position: absolute;
    width: 40%;
}
#mainbodyloginpage {
    top: 55%;
}

CSS属性未应用

2 个答案: