html 元素未在媒体查询中被下推

Question

我确定这个问题之前已经回答过，但大多数问题都说 "absolute" 定位是罪魁祸首。我试过调整位置，不知道为什么P元素没有被压下。

在我的实际项目中，需要在媒体查询上下推的是注释掉的"bannerArea"，但背景区域遮住了我的导航菜单。

http://codepen.io/fastpenguin91/pen/BLrZBA?editors=1100

.clearfix:after {
  content: " ";
  display: block;
  height: 0;
  clear: both;
}
.nav-container {
  background: #fff;
  width: 100%;
  height: 106px;
}
.nav {
  display: table;
}
.primary-nav {
  width: 648px;
  float: right;
  padding-right: 4%;
  height: 109px;
}
.listItem {
  display: table-cell;
  vertical-align: middle;
}
.listItem {} .logo {
  background: #ffffff;
  display: inline-block;
  padding: 15px;
}
.logo--primary {
  float: left;
}
.primary-nav--content {
  border-left: 2px dashed black;
  padding-left: 8px;
}
.test {
  height: 50px;
  background: pink;
}
/*
    .bannerArea {
        background: url(../assets/glowgradient.png) no-repeat;
        height: 342px;
        position: relative;
    }*/

/*
    .bannerImg {
        position: absolute;
        top: 10%;
        left: 50%;
        transform: translateX(-50%);
        width: 70%;
    }
    
    
    */

@media only screen and (max-width: 1006px) {
  .nav {
    display: block;
  }
  .primary-nav {
    width: 100%;
    padding-right: 0%;
    height: auto;
  }
  .nav-container {
    height: auto;
  }
  .listItem {
    display: inline-block;
    text-align: center;
    width: 100%;
    padding: 10px 0px;
  }
  .primary-nav--content {
    border: none;
    border-bottom: 2px solid black;
  }
  .logo--primary {
    text-align: center;
    margin: 0 auto;
    float: none;
    display: block;
  }
}

<header class="nav-container">
  <img class="logo  logo--primary" src="assets/logo.png" />
  <ul class="nav  primary-nav  clearfix">
    <li class="listItem">
      <div class="primary-nav--content">
        <p>HOME</p>
        <p>Back to Home</p>
      </div>
    </li>
    <li class="listItem">
      <div class="primary-nav--content">
        <p>PRODUCTS</p>
        <p>What we have for you</p>
      </div>
    </li>
    <li class="listItem">
      <div class="primary-nav--content">
        <p>SERVICES</p>
        <p>Things we do</p>
      </div>
    </li>
    <li class="listItem">
      <div class="primary-nav--content">
        <p>BLOG</p>
        <p>Follow Our Updates</p>
      </div>
    </li>
    <li class="listItem">
      <div class="primary-nav--content">
        <p>CONTACT</p>
        <p>Ways to reach us</p>
      </div>
    </li>
  </ul>
</header>

<div class="test">
  <p>hello</p>
</div>
<!--
    <div class="bannerArea">

        <img class="bannerImg" src="assets/bannerImg.jpg"/>
    </div> -->

Answer 1

很简单。将 float 和 width 添加到父级：

.test {
    height: 50px;
    background: pink;
    float: left;
    width: 100%;
}

浮动和宽度使该元素与其他元素相关，因此它被推到横幅下方。

Answer 2

您应该移除浮动。通常，应该完全避免使用它们，当然也不要将它们用于布局。在您的情况下，您希望菜单是块级别的，所以只需删除浮动：

.primary-nav {
   width: 100%;
   padding: 0%; /* <- looked weird with left padding */
   height: auto;
   float:none; /* <- don't use floats for layout */
}

.clearfix:after {
  content: " ";
  display: block;
  height: 0;
  clear: both;
}
.nav-container {
  background: #fff;
  width: 100%;
  height: 106px;
}
.nav {
  display: table;
}
.primary-nav {
  width: 648px;
  float: right;
  padding-right: 4%;
  height: 109px;
}
.listItem {
  display: table-cell;
  vertical-align: middle;
}
.listItem {} .logo {
  background: #ffffff;
  display: inline-block;
  padding: 15px;
}
.logo--primary {
  float: none;/*left*/;
}
.primary-nav--content {
  border-left: 2px dashed black;
  padding-left: 8px;
}
.test {
  height: 50px;
  background: pink;
}
/*
    .bannerArea {
        background: url(../assets/glowgradient.png) no-repeat;
        height: 342px;
        position: relative;
    }*/

/*
    .bannerImg {
        position: absolute;
        top: 10%;
        left: 50%;
        transform: translateX(-50%);
        width: 70%;
    }
    
    
    */

@media only screen and (max-width: 1006px) {
  .nav {
    display: block;
  }
  .primary-nav {
    width: 100%;
    padding: 0%;
    height: auto;
    float:none;
  }
  .nav-container {
    height: auto;
  }
  .listItem {
    display: inline-block;
    text-align: center;
    width: 100%;
    padding: 10px 0px;
  }
  .primary-nav--content {
    border: none;
    border-bottom: 2px solid black;
  }
  .logo--primary {
    text-align: center;
    margin: 0 auto;
    float: none;
    display: block;
  }
}

<header class="nav-container">
  <img class="logo  logo--primary" src="assets/logo.png" />
  <ul class="nav  primary-nav  clearfix">
    <li class="listItem">
      <div class="primary-nav--content">
        <p>HOME</p>
        <p>Back to Home</p>
      </div>
    </li>
    <li class="listItem">
      <div class="primary-nav--content">
        <p>PRODUCTS</p>
        <p>What we have for you</p>
      </div>
    </li>
    <li class="listItem">
      <div class="primary-nav--content">
        <p>SERVICES</p>
        <p>Things we do</p>
      </div>
    </li>
    <li class="listItem">
      <div class="primary-nav--content">
        <p>BLOG</p>
        <p>Follow Our Updates</p>
      </div>
    </li>
    <li class="listItem">
      <div class="primary-nav--content">
        <p>CONTACT</p>
        <p>Ways to reach us</p>
      </div>
    </li>
  </ul>
</header>

<div class="test">
  <p>hello</p>
</div>
<!--
    <div class="bannerArea">

        <img class="bannerImg" src="assets/bannerImg.jpg"/>
    </div> -->

Answer 3

您清除了导航的浮动，但未清除处于同一嵌套级别的徽标的浮动。将 clear: both; 添加到 .test 样式。

.clearfix:after {
  content: " ";
  display: block;
  height: 0;
  clear: both;
}
.nav-container {
  background: #fff;
  width: 100%;
  height: 106px;
}
.nav {
  display: table;
}
.primary-nav {
  width: 648px;
  float: right;
  padding-right: 4%;
  height: 109px;
}
.listItem {
  display: table-cell;
  vertical-align: middle;
}
.listItem {} .logo {
  background: #ffffff;
  display: inline-block;
  padding: 15px;
}
.logo--primary {
  float: left;
}
.primary-nav--content {
  border-left: 2px dashed black;
  padding-left: 8px;
}
.test {
  clear: both;
  height: 50px;
  background: pink;
}
/*
    .bannerArea {
        background: url(../assets/glowgradient.png) no-repeat;
        height: 342px;
        position: relative;
    }*/

/*
    .bannerImg {
        position: absolute;
        top: 10%;
        left: 50%;
        transform: translateX(-50%);
        width: 70%;
    }
    
    
    */

@media only screen and (max-width: 1006px) {
  .nav {
    display: block;
  }
  .primary-nav {
    width: 100%;
    padding-right: 0%;
    height: auto;
  }
  .nav-container {
    height: auto;
  }
  .listItem {
    display: inline-block;
    text-align: center;
    width: 100%;
    padding: 10px 0px;
  }
  .primary-nav--content {
    border: none;
    border-bottom: 2px solid black;
  }
  .logo--primary {
    text-align: center;
    margin: 0 auto;
    float: none;
    display: block;
  }
}

<header class="nav-container">
  <img class="logo  logo--primary" src="assets/logo.png" />
  <ul class="nav  primary-nav  clearfix">
    <li class="listItem">
      <div class="primary-nav--content">
        <p>HOME</p>
        <p>Back to Home</p>
      </div>
    </li>
    <li class="listItem">
      <div class="primary-nav--content">
        <p>PRODUCTS</p>
        <p>What we have for you</p>
      </div>
    </li>
    <li class="listItem">
      <div class="primary-nav--content">
        <p>SERVICES</p>
        <p>Things we do</p>
      </div>
    </li>
    <li class="listItem">
      <div class="primary-nav--content">
        <p>BLOG</p>
        <p>Follow Our Updates</p>
      </div>
    </li>
    <li class="listItem">
      <div class="primary-nav--content">
        <p>CONTACT</p>
        <p>Ways to reach us</p>
      </div>
    </li>
  </ul>
</header>

<div class="test">
  <p>hello</p>
</div>
<!--
    <div class="bannerArea">

        <img class="bannerImg" src="assets/bannerImg.jpg"/>
    </div> -->

html 元素未在媒体查询中被下推

html element not being pushed down on media query

html

css

positioning