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会改变头寸而不是顶部？

Answer 1

值top的百分比取决于包含块的高度 - 请参阅http://www.w3.org/TR/CSS21/visuren.html#position-props - 而margin-top的百分比基于包含块的宽度 - 请参阅{ {3}} - 导致尺寸不同。

因此，如果我的猜测是正确的，并且您的登录页面只包含绝对定位的div，那么包含的块（正文）在功能上是空的并且没有任何高度。
它的标准宽度确实为窗口的100％，这就是为什么top-margin有效而不是top。

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

只有Margin-top工作但不是顶级

1 个答案: