為什么我的DIV重疊

Question

有人可以告訴我為什么我的'header'div和'pageInnerWrap'div重疊...被絕對位置搞亂了卻無法得到...任何幫助...

      <div id="pageWrap">
                    <div id="pageInnerWrap" class="push">

                        <div id="header" class="push">

                            <div class="inner-wrap">
                                <a id="A2" href="Home.aspx"><img src="/images/logo_new.png" alt="Azi Map" /></a>    

                                    <div style="position:relative;float:right">

                                        <%--Login Stuff--%>
                                        <div class="loginDisplay" style="width:33%">                               

                                            <asp:LoginView ID="HeadLoginView" runat="server" EnableViewState="false">
                                                <AnonymousTemplate> 
                                                    <img src="/images/btn_login.png" alt="Login" />                        
                                                    <a href="~/Account/Login.aspx" ID="A3" runat="server" title="Sign in with your account details">Login</a> |
                                                    <a id="A4" href="~/Account/Register.aspx" runat="server" title="Sign up for your 30 days free trial">Free Trial</a>
                                                </AnonymousTemplate>
                                                <LoggedInTemplate>
                                                    Welcome <span class="bold"><asp:Label id="UserLogonID" runat="server"></asp:Label></span>,
                                                    <br />                        
                                                     [<asp:HyperLink ID="hlChangePassword" runat="server" NavigateUrl="~/Account/ChangePassword.aspx">Change Password</asp:HyperLink>]
                                                     [<asp:LoginStatus ID="HeadLoginStatus" runat="server" LogoutAction="Redirect" LogoutText="Log Out" LogoutPageUrl="~/Home.aspx"/>]
                                                    <br />
                                                </LoggedInTemplate>
                                            </asp:LoginView>

                                            <p style="text-align:right">
                                                <asp:Label ID="lblFreeTrialDays" runat="server" Text=""></asp:Label>
                                            </p>

                                        </div>

                                    </div>
                                        <ul id="nav">
                                                <li><a href="<%=Session["BaseURL"] %>MemberPages/customerDataStorePortal.aspx" id="btn-data"><img src="/images/btn_layers.png" alt="Layers" />Layers</a></li>
                                                <li><a href="<%=Session["BaseURL"] %>MemberPages/customerMapPortal.aspx" id="btn-maps"><img src="/images/btn_maps.png" alt="Layers"/>Maps</a></li>
                                                <li><a href="<%=Session["BaseURL"] %>AdminPages/Admin.aspx" id="btn-admin"><img src="/images/btn_admin.png" alt="Layers"/>Admin</a></li>
                                        </ul>

                                        <div id="mobile-btn">
                                            <img src="imgs/menu_btn.png" alt="Menu Button" />
                                        </div>


                                  </div> 
                            </div><%--header--%>



                                <div style=" margin: 0 auto; width: 2000px; height: 1200px">
                                    <div id="mainContent" class="main" style="background:white;">
                                        <asp:ContentPlaceHolder ID="MainContent" runat="server"/>
                                            <div style= "visibility:hidden;>
                                                <div id="AlertDiv" class="AlertStyle">
                                                    <asp:Image ID="Image1" runat="server" ImageUrl="~/images/loading.GIF"/> 
                                                </div>
                                            </div>
                                    </div>
                                </div>
                     </div>

                <div id="mobile-nav-items">
                    <ul>
                    </ul>
                </div>

            </div>

CSS

  * {
    box-sizing: border-box;
}

html, body, div {
    border: 0 none;
    margin: 0;
    padding: 0;
}

body { padding-top:150px; }

#pageWrap { position: relative; }
#pageInnerWrap { position: relative; }

div#header { background:#1E4964; color:#fff;  font:14px/1.5em Arial, sans-serif; font-weight:600; position:fixed; width:100%; top:0;  }
div#header .inner-wrap { max-width:1900px; margin:0 auto; width:95%; padding:0 2.5%; } 
div#header a { color:#fff; position:relative; text-decoration: none; }
div#header a:active { top:1px; }

header #page-header-top { background:#000; }
header #page-header-top .inner-wrap { padding-top:10px; padding-bottom:10px; height:40px; text-align:right; overflow: hidden; }
header #page-header-top .inner-wrap a { background:#153447; }
header #page-header-top img { position: relative; top:4px; left:-4px; }
header #page-header-top a:hover { text-decoration: underline; }
header #mobile-btn { display:none; }

header a#logo { float:left; margin:38px 0; }

div#heade ul#nav { float:right; margin:0; }
div#heade ul#nav li { display:inline-block; text-align:center; }
div#heade ul#nav li a { padding:20px 30px; display:inline-block; }
div#heade ul#nav li a:hover { background:#185070; }
div#heade ul#nav li a#active { background:#153447; }
div#heade ul#nav li a img { margin:0 auto 20px; display:block; } 

header .clear { clear:both; }

#mobile-nav-items { display:none; }
#mobile-btn { display:none; float:right; margin:35px 0; padding:10px 10px 5px; cursor: pointer; position: relative; }
#mobile-btn:active { top: 1px; }

@media only screen and (max-width : 1200px) {
    header ul#nav li a { padding-left:20px; padding-right:20px; }
}


@media only screen and (max-width : 950px) {
    header #mobile-btn { display:block; }
    header #mobile-btn:hover {  background:#153447; }
    header #mobile-btn.menu-open { background:#153447; }
    header #mobile-btn img { width:20px; }
    #mobile-nav-items {
        display:block;
    }

    ul#nav { display: none; }

}


/* change on scroll */
div#header, 
div#header * {
  -webkit-transition: all 0.3s ease-in;
  -moz-transition: all 0.3s ease-in;
  -o-transition: all 0.3s ease-in;
  transition: all 0.3s ease-in;
}

header.scrolled #page-header-top .inner-wrap { height:0; padding-top:0; padding-bottom:0; }
header.scrolled a#logo { margin:12px 0 5px;  }
header.scrolled ul#nav li a img { height:0; margin:0; }
header.scrolled #mobile-btn { margin:10px 0 3

px; }

Answer 1

對此代碼有問題，使縮進正確，我想您會丟失</div>並且缺少引號並不感到驚訝：

<div style= "visibility:hidden;>

我試圖清理它，但放棄了，只有您知道哪一部分應該在哪里。 例如，將兄弟姐妹放在同一列表級別：

<div id="header" class="push">
    <div class="inner-wrap">
        <a id="A2" href="Home.aspx"><img src="/images/logo_new.png" alt="Azi Map" /></a>    

        <div style="position:relative;float:right">
            ...
        </div>
        ...
        <div />
    </div>
</div>

同樣在SO上，在代碼塊之前需要4個空格或一個制表符，但不要再多了，只看您的問題，一半的代碼是不必要的前導空格。