html - 只有 Margin-top 有效但不是 top

Question

我正在尝试使我的登录页面与 css 保持一致。但是，我在两个属性 margin-top 和 top 之间遇到了问题。 margin-top倾向于根据第一个元素推送登录页面，而top只是登录页面的位置。因此，我不能在我的媒体查询代码中使用 margin-top 。不幸的是，top 不能正常工作

这就是我在 CSS 中添加 top 属性的方式

#loginpage {
position:absolute;
width:100%;
top:-42%;
}

这是行不通的。

只有这个有效

margin-top:-20%;

在我的登录页面上方，有一个幻灯片标题和一个 twitterbootstrap 导航栏

#twitterbootstrap {
    position: relative;
}

#SlideshowHome {
    position: absolute;
    left: 0%;
    width: 100%;
    top: 6%;
    height: 20%;
}

这是我的登录页面

 <div id="loginpage">
    <table id="loginpage1" width="100%">
    <tr>
        <td>
            <h2>Login</h2>
            <br />
        </td>
    </tr>

    <tr>

       <td>
          <b>  Username : </b> <asp:TextBox ID="txtUsername" runat="server"></asp:TextBox>
            <br />
            <br />
        </td>
    </tr>

    <tr>

        <td>
           <b> Password : </b> <asp:TextBox ID="txtPassword" runat="server" TextMode="Password" ></asp:TextBox>
            <br />
            <br />
        </td>
    </tr>

</table>
</div>

这也是我的 twitterbootstrap 和幻灯片标题

 <div id="SlideshowHome">
 <img src="image/s1.jpg" name="slide" style="width:100%; height:150%">

</div>
<div id="twitterbootstrap">
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
    <div class="container">
        <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </a>
        <a class="brand" href="#">iPolice's Menu</a>
        <div class="nav-collapse">
            <ul class="nav">
                <li class="divider-vertical"></li>
                <li><a href="Login.aspx">Login</a></li>
                <li class="divider-vertical"></li>
                <li><a href="RecoverPassword.aspx">Recover Password</a></li>
                <li><a href="https://www.facebook.com/singaporepoliceforce?ref=ts&fref=ts"><img src="image/facebook.jpg" style="width:100px; height:30px"></a></li>
                <li><a href="https://twitter.com/SingaporePolice"><img src="image/twitter.jpg" style="width:100px; height:30px"></a></li>
            </ul>
        </div>
    </div>
</div>
</div>
</div>

所以请问为什么只有margin-top改变位置而不改变top？

Answer 1

top 的百分比值基于包含 block 的高度 - 参见 http://www.w3.org/TR/CSS21/visuren.html#position-props - 而以百分比表示的 margin-top 是基于包含 block 的宽度 - 参见 http://www.w3.org/TR/CSS21/box.html#margin-properties - 造成大小差异。

因此，如果我的猜测是正确的，并且您的登录页面仅包含绝对定位的 div，那么包含 block (主体)在功能上是空的，并且没有任何高度。
它确实有 100% 窗口的标准宽度，所以这就是 top-margin 有效但 top 无效的原因。

解决方案:明确地给容器一个高度。