Html 底部div与顶部重叠_Html_Css

Html 底部div与顶部重叠

html css

Html 底部div与顶部重叠,html,css,Html,Css,我在试图让中间部分的内容div显示在顶部div下面时遇到了一些麻烦。我的意思是，底部div重叠并显示在顶部div的下面或底部下面是两幅图片和代码，让您更好地了解我要写的内容：以下是它在浏览器中的外观：下面是它的外观：以下是HTML： <!doctype html> <html> <head> <meta charset="utf-8"> <title>Untitled Document</title> <l

我在试图让中间部分的内容div显示在顶部div下面时遇到了一些麻烦。我的意思是，底部div重叠并显示在顶部div的下面或底部

下面是两幅图片和代码，让您更好地了解我要写的内容：

以下是它在浏览器中的外观：

下面是它的外观：

以下是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>

看起来你没有设置

明确：两者皆有；所以酒吧在上浮

如果您可以提供url，那么我可以准确地告诉您要添加哪个/在哪里我看到您将顶部的栏位置设置为相对，但相对于什么？：您没有指定顶部、左侧、右侧或底部的相对数量。此外，您应该将

midSecWrapper

的

clear

属性设置为

both

：

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

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

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

你可以用测试。

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

实际上，我可以通过在整个top div周围放置一个包装容器来实现它。我这样设置它：

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

它包含了所有元素，并允许我将midSecWrapper放置在图像下方的适当位置。

这是好的，还是好的代码，还是有一种“正确的方法”可以做到这一点？我一直认为，如果网站按我所希望的方式运行，并且经过验证，那就很好了。

感谢您这么快的回复！我真的很感激。不幸的是，它还没有上线。在我上线之前，我正在本地工作，并在各种浏览器上进行测试。你能评论一下你的代码，指出问题发生的地方吗？谢谢！如果您查看，即中间部分div开始出现在页面顶部，而不是顶部div下方。如果您查看图像，您可以在导航栏中看到一条线。它应该在大的主图像下面。你应该测试一下维科的答案。我认为问题出在徽标上，而不是图像上。因此，将徽标显示为：block？默认情况下，它们是

内联块

，因此它们的工作方式与

块

略有不同。但是，是徽标还是您的

midSpacer

有问题？谢谢您的帮助！我插入了代码，得到了相同的结果。我知道我在尝试使用定位和z索引时会遇到问题，但我必须尝试，我希望使用我的设计。我可能需要重新设计。。。基本上，将有3个主要div，wrapper，midSecWrapper和footer。我想，由于没有更好的术语，我可以彼此叠加而不重叠。我以前做过，但没有使用定位和z索引。我编辑了我的答案，很抱歉，必须为

midSecWrapper

设置

clear

属性（是谁在清理空间）。此外，如果您使用浮动，您应该设置特定的高度和宽度，并且浮动的容器也必须是“浮动的”。非常感谢！我插入了代码，midSecWrapper看起来像是在主映像后面。我已将高度和宽度设置为特定值。所以，我必须浮动包装器和中间包装器？是的，它们必须根据整个页面浮动，以便渲染器正常工作。因此，如果子元素是浮动的，父元素也必须是浮动的，一直到最终的父元素（就在

body

元素内部的父元素）。如果我将包装器向左或向右浮动，整个事情都会朝这个方向进行。

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