Question

我在尝试让mid节内容div出现在顶部div下时遇到了一些麻烦。我的意思是底部div重叠并出现在顶部div的下方或底部。

这里有两张图片和代码，让您更好地了解我要写的内容：

以下是浏览器中的内容： enter image description here

以下是它应该是什么样子： enter image description here

这是HTML：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="style/style.css" rel="stylesheet" type="text/css">
</head>

<body>
<div id="topBar">
    <div id="wrapper">
        <!--top left phone number and icon start-->
       <div id="leftTop">
            <div id="facebookTop">
            <a href="#">
            <img src="images/facebook-icon.png" alt="GreatOrlandoDiscounts Become our friend on Facebook!" />
            </a>
            </div>
            <p class="topLeftNumber">Call us at: <mark class="orange">1-800-544-7646</mark></p>
        </div>
        <!--top left phone number and icon end-->
                <!--top right phone number and icon start-->
                <div id="rightTop">
                <div id="twitterTop">
                <img src="images/twitter-icon.png" alt="GreatOrlandoDiscounts Follow us on Twitter" />
                </div>
                <p class="topRightNumber">Call us at: <mark class="orange">1-800-544-7646</mark></p>
                </div> 
                <!--top left phone number and icon end-->
                    <!--Left nav bar start-->
                    <div id="leftNavBar">
                        <!--left nav dropdown start-->
                        <div id="navBarLeft">
                        <div id="dropdownContainerLeft">
                        <div id="menuLeft">
                        <ul>
                        <li class="home"><a href="http://www.ticketmomma.com">HOME</a></li>
                        <li class="attractions"><a href="http://www.ticketmomma.com/orlando-attractions.html">THEME PARKS</a>
                        <ul>
                        <li class="attractions"><a href="http://www.ticketmomma.com/walt-disney-world.htm">Disney</a></li>
                        <li class="attractions"><a href="http://www.ticketmomma.com/universal-orlando.htm">Universal Studios</a></li>
                        <li class="attractions"><a href="http://www.ticketmomma.com/sea-world-orlando.htm">SeaWorld</a></li>
                        <li class="attractions"><a href="http://www.ticketmomma.com/busch-gardens-tickets.htm">Busch Gardens</a></li>
                        <li class="attractions"><a href="http://www.ticketmomma.com/dinner-shows.html">Dinner Shows</a></li>
                        </ul>
                        </li>
                        <li class="attractions"><a href="http://www.ticketmomma.com/orlando-attractions.html">WATER PARKS</a>
                        <ul>
                        <li class="attractions"><a href="http://www.ticketmomma.com/walt-disney-world.htm">Disney</a></li>
                        <li class="attractions"><a href="http://www.ticketmomma.com/universal-orlando.htm">Universal Studios</a></li>
                        <li class="attractions"><a href="http://www.ticketmomma.com/sea-world-orlando.htm">SeaWorld</a></li>
                        <li class="attractions"><a href="http://www.ticketmomma.com/busch-gardens-tickets.htm">Busch Gardens</a></li>
                        <li class="attractions"><a href="http://www.ticketmomma.com/dinner-shows.html">Dinner Shows</a></li>
                        </ul>
                        </li>
                        </ul>
                        </div>
                        </div>
                        </div>
                        <!--left nav dropdown end-->
                    </div>
                    <!--Left nav bar end-->
                    <!--Right nav bar start-->
                    <div id="rightNavBar">
                    <!--Right nav dropdown start-->
                        <div id="navBarRight">
                        <div id="dropdownContainerRight">
                        <div id="menuRight">
                        <ul>
                        <li class="attractions"><a href="http://www.ticketmomma.com/orlando-attractions.html">DINNER SHOWS</a>
                        <ul>
                        <li class="attractions"><a href="http://www.ticketmomma.com/walt-disney-world.htm">Disney</a></li>
                        <li class="attractions"><a href="http://www.ticketmomma.com/universal-orlando.htm">Universal Studios</a></li>
                        <li class="attractions"><a href="http://www.ticketmomma.com/sea-world-orlando.htm">SeaWorld</a></li>
                        <li class="attractions"><a href="http://www.ticketmomma.com/busch-gardens-tickets.htm">Busch Gardens</a></li>
                        <li class="attractions"><a href="http://www.ticketmomma.com/dinner-shows.html">Dinner Shows</a></li>
                        </ul>
                        </li>
                        <li class="attractions"><a href="http://www.ticketmomma.com/orlando-attractions.html">ATTRACTIONS</a>
                        <ul>
                        <li class="attractions"><a href="http://www.ticketmomma.com/walt-disney-world.htm">Disney</a></li>
                        <li class="attractions"><a href="http://www.ticketmomma.com/universal-orlando.htm">Universal Studios</a></li>
                        <li class="attractions"><a href="http://www.ticketmomma.com/sea-world-orlando.htm">SeaWorld</a></li>
                        <li class="attractions"><a href="http://www.ticketmomma.com/busch-gardens-tickets.htm">Busch Gardens</a></li>
                        <li class="attractions"><a href="http://www.ticketmomma.com/dinner-shows.html">Dinner Shows</a></li>
                        </ul>
                        </li>
                        <li class="attractions"><a href="http://www.ticketmomma.com/orlando-attractions.html">SERVICES</a>
                        <ul>
                        <li class="attractions"><a href="http://www.ticketmomma.com/walt-disney-world.htm">Disney</a></li>
                        <li class="attractions"><a href="http://www.ticketmomma.com/universal-orlando.htm">Universal Studios</a></li>
                        <li class="attractions"><a href="http://www.ticketmomma.com/sea-world-orlando.htm">SeaWorld</a></li>
                        <li class="attractions"><a href="http://www.ticketmomma.com/busch-gardens-tickets.htm">Busch Gardens</a></li>
                        <li class="attractions"><a href="http://www.ticketmomma.com/dinner-shows.html">Dinner Shows</a></li>
                        </ul>
                        </li>
                        </ul>
                        </div>
                        </div>
                        </div>
                        <!--Right nav dropdown end-->
                    </div>
                    <!--Right nav bar end-->
                        <!--Main image start - ONLY CHANGE IMAGE IN INLINE CODE-->
                         <div id="mainImage">
                         <img class="main" src="images/main-image.jpg"  alt="Discount Walt Disney World Tickets" />
                         </div>
                         <!--Main image end-->
                                <!--Logo start-->
                                <div id="logo">
                                <a href="http://www.greatorlandodiscounts.com">
                                <img src="images/logo.png" alt="Great Orlando Discount Tickets" />
                                </a>
                                </div>  
                                <!--Logo end--> 
      </div>
</div> 
<!--Middle section start-->
        <div id="midSecWrapper">
            <!--midSpacer start-->
            <div id="midSpacer"></div>
            <!--midSpacer end-->
        </div>
<!--Middle section end-->

</body>
</html>

这是我的CSS：

@charset "utf-8";
/* CSS Document */

body {
    margin: 0 auto;
    background-image:url(../images/body-bg.jpg);
    background-repeat:repeat;
}

#topBar {
    width: 100%;
    height: 58px;
    background-image:url(../images/top-bar.png);
    background-repeat:repeat-x;
    position: relative;
    z-index:0;  
}

#wrapper {
    width: 980px;
    height: 501px;
    position:relative;
    z-index:100;
    margin: 0 auto;
}

#logo {
    width: 260px;
    height: 185px;
    position:relative;
    z-index:999;
    margin: 0 auto;
}

#leftTop {
    width: 350px;
    height: 58px;
    float: left;
    z-index:200;
}

#rightTop {
    width: 360px;
    height: 58px;
    float: right;
    z-index:300;
}

#mainImage {
    width: 980px;
    height: 401px;
    float: left;
    clear: left;
    position: absolute;
    z-index: -100;
    margin-top: 100px;
    left: 0px;
    top: -2px;
}

#facebookTop {
    float:left;
    margin: 4px 10px 0px 0px;
}

#twitterTop {
    float:right;
    margin: 4px 0px 0px 10px;
}

#leftNavBar {
    width: 340px;
    height: 40px;
    float: left;
    clear: both;
    z-index:600;
}

#rightNavBar {
    width: 360px;
    height: 40px;
    float: right;
    clear: right;
    z-index:700;
}

#midSecWrapper {
    margin: 0 auto;
    width: 980px;
    height: 501px;
}

#midSpacer {
    width: 980px;
    height: 30px;
    background-image:url(../images/spacer.png);
    background-repeat:repeat-x;
}

.topLeftNumber {
    font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
    font-size: 18px;
    font-weight:bold;
    color: #e1ebf4;
    margin-top: 15px;
}

.topRightNumber {
    font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
    font-size: 18px;
    font-weight:bold;
    color: #e1ebf4;
    margin-top: 15px;
    text-align:right;
}

mark.orange {
    color:#fa7252;
    background: none;
}

.twitterTop {
}

/*Nav bar style left*/
#menuLeft {
    padding: 5px 0px 0px 0px;
    margin:0;
}
#menuLeft ul{
    padding:0;
    margin:0;
}
#menuLeft li{
    position: relative;
    float: left;
    list-style: none;
    margin: 0;
    padding:0;
}
#menuLeft li a{
    font-size: 12px;
    width:110px;
    height: 30px;
    display: block;
    text-decoration:none;
    text-align: center;
    line-height: 30px;
    font-family: Arial, Helvetica, sans-serif;
    text-shadow: 1px 1px 2px #9d9d9d;
    color: #454f54;
}

#menuLeft li a:hover{ 
    background-image: url(../images/nav-hover-bg.jpg); 
    color: #fa7252; background-color: #e1ebf4;
}

#menuLeft ul ul{ 
    position: absolute; 
    top: 30px; 
    visibility: hidden; 
    background-color: #e1ebf4; 
    color: #22293c;
}

#menuLeft ul li:hover ul{ 
    visibility:visible; 
    color: #22293c; 
}
/*Nav Bar Style left end*/

/*Nav bar style right*/
#menuRight {
    padding: 5px 0px 0px 0px;
    margin:0;
}
#menuRight ul{
    padding:0;
    margin:0;
}
#menuRight li{
    position: relative;
    float: left;
    list-style: none;
    margin: 0;
    padding:0;
}
#menuRight li a{
    font-size: 12px;
    width:120px;
    height: 30px;
    display: block;
    text-decoration:none;
    text-align: center;
    line-height: 30px;
    font-family: Arial, Helvetica, sans-serif;
    text-shadow: 1px 1px 2px #9d9d9d;
    color: #454f54;
}

#menuRight li a:hover{ 
    background-image: url(../images/nav-hover-bg.jpg); 
    color: #fff; background-color: #e1ebf4;
}

#menuRight ul ul{ 
    position: absolute; 
    top: 30px; 
    visibility: hidden; 
    background-color: #e1ebf4; 
    color: #22293c;
}

#menuRight ul li:hover ul{ 
    visibility:visible; 
    color: #22293c; 
}
/*Nav Bar Style right end*/

Answer 1

看起来你没有设置

明确：两者; 所以酒吧正在浮动

如果您可以提供网址，那么我可以准确地告诉您哪个/在哪里添加

Answer 2

我看到你将顶部的条形位置设置为相对但相对于什么？：您不能指定顶部，左侧，右侧或底部相对量。此外，您应将midSecWrapper的{{1}}媒体资源设为clear：

both

您可以使用this fiddle进行测试。

Answer 3

我在评论部分发布了这个，但我想我会将其作为答案发布。我可能是一个解决方案，并可能帮助其他人解决类似的问题。

我实际上能够通过在整个顶部div上放置一个#wrapperContainer来使其工作。我这样设置：

wrapperContainer {
margin: 0 auto;
width:100%;
height:505px;
}

包含所有元素并允许我将midSecWrapper放在图像下面。这是好的，还是好的代码，还是有正确的方式＆＃34;去做吧？我一直认为，如果网站以我想要的方式运行并且验证，那么最好去。

底部div与顶部重叠

3 个答案: