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-课程，这就是您遇到此问题的原因，您只需修复此问题即可在1200px {{1获得col-xs-宽度

的类

Div重叠另一个div

2 个答案: