另一个 div 的 div 重叠

Question

我一直在尝试解决我正在构建的网站上遇到的问题。该网站在正常大小的情况下在桌面浏览器上正常显示，但是当您将浏览器窗口缩小或在手机上查看该网站时，我有一个与页面上的页脚 div 重叠的层。

请看这个问题的图片：

与我的页脚重叠的 div 层有一个 logodiv 类，这是我的 css 代码：

 .logodiv{
    text-align: center;
    top: 50%;
    transform: translateY(-50%);
    font-family: 'Quicksand', sans-serif;
    font-size: 20px;
    display: block;
}

标题的ID名称为logoheadline，并具有以下css

#logoheadline{
   font-family: 'Anton', sans-serif;
    font-size: 58px;
    position: relative;
   }

最后，我的页脚有一个类名footerz，它有以下css：

.footerz{
    background-color: #323232;
    min-height: 200px;
    color: white;
    font-family: 'Quicksand', sans-serif;
}

intro-p div 具有以下 css：

.intro-p{
    font-family: 'Quicksand', sans-serif;
    font-size: 20px;
    position: relative;
}

这是我拥有的 html：

<section id="section01" class="demo">

    <div class="col-md-12" id="main-bd">

            <div class="col-md-4 col-md-offset-1 logodiv" >

                <div id="myCarousel" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
      <li data-target="#myCarousel" data-slide-to="3"></li>

  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner">


    <div class="item active">
       <img class="img-responsive center-block" src="images/activities.png" height="470" width="245" alt="Activities">
    </div>

    <div class="item">
       <img class="img-responsive center-block" src="images/chat.png" height="470" width="245" alt="Activities">
    </div>

      <div class="item">
       <img class="img-responsive center-block" src="images/map.png" height="470" width="245" alt="Activities">
    </div>

      <div class="item">
       <img class="img-responsive center-block" src="images/hot.png" height="470" width="245" alt="Activities">
    </div>
  </div>

  <!-- Left and right controls -->
  <a class="left carousel-control" href="#myCarousel" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#myCarousel" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
    <span class="sr-only">Next</span>
  </a>
</div>


            </div>

        <div class=" col-md-6 logodiv" >
            <br>
            <h1 id="logoheadline">Getting together has never been easier! </h1>
                <p class="intro-p">Create events and activities, find hot new places to visit, see where your friends hang out all from within the spaze app!</p>

            <button class="gbtnHollow">Download</button><br><br><br>



        </div>
        <a href="#section02" style=" font-family: 'Quicksand', sans-serif;"><span></span></a>

    </div>

    </section>


    <section id="section02" class="demo2">

    <div class="container-fluid footerz">

    <div class="col-md-2">
    <br>
        <ul id="footerul">
        <li><a href='privacy.html'>Privacy Policy</a></li>
        <li><a href='terms.html'>Terms &amp; Conditions</a></li>
        <li><a href='#'>Ads</a></li>
        </ul>

    </div>



        <div class="col-md-4">
            <br>
            <div class="col-md-4 col-md-offset-2">
                <ul id="footerul">
                    <li><a href="#">Contact Us</a></li>
                    <li><a href='#'>Our Story</a></li>
                    <li><a href='#'>Press Kit</a></li>

                </ul>

            </div>
        </div>

         <div class="col-md-4">
            <br>
            <div class="col-md-12 ">
                <ul id="footerul">

                    <li><a href='#'>Jobs</a></li>
                    <li><a href='#'>Angel Investors</a></li>

                </ul>

            </div>
        </div>

    <div class="col-md-2">
   <br>
        <!--This is where all the social media buttons need to go.-->
        <ul class="list-inline" >
            <li><a href="#"> <img src="./images/facebook.png" alt="Facebook" width="35" height="35"> </a></li>
            <li><a href="#"> <img src="./images/instagram.png" alt="Instagram" width="35" height="35"> </a> </li>
            <li><a href="#"> <img src="./images/twitter.png" alt="Instagram" width="35" height="35"> </a> </li>
        </ul>

    </div><br>


        <div class="col-md-12" style="text-align: center;">
        <br>


        </div>

    </div> 

    </section>

我一直在摸不着头脑，谁能告诉我我错过了什么？

Answer 1

从您的 logindiv 中删除 top :50%。 top 与 Css 的 position 属性一起使用，这可能会在您的代码中产生问题。基本避免强行使用位置。在需要的地方使用它们。

Answer 2

您正在使用 col-md- class only ，这就是您遇到此问题的原因，您可以简单地解决这个问题，您可以添加 col-xs- classes 而不是 col-md- class ，在 1200px col-md- classes 获得 100% 宽度之后