Question

我有4个块Header，Section，Main，Footer。

我在标题中添加了一个水平菜单，然后将其设置在带滑块的部分菜单上方。但问题是我想在页面宽度小于1136像素时将菜单设置为垂直，菜单覆盖我的滑块部分，我不想要这样。我想要的是该部分下面的菜单，以便用户可以看到菜单和滑块。我把我的网站网址理解得很好。

＆＃13;

/*Header Tag*/
.cd-header {
  position: absolute;
  z-index: 5;
  top: 0;
  left: 0;
  width: 100%;
  height: 50px;
  background-color: rgba(0,1,1,0.4);
}
  /*section Tag*/
.cd-hero{
  position: relative;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
  /*main Tag*/
.cd-main-content {
  width: 90%;
  max-width: 768px;
  margin: 0 auto;
  padding: 2em 0;
}

＆＃13;

Answer 1

只需使用display：none

即可

在滑块所在的部分下方添加另一个菜单，只有在达到宽度1136px时才会显示。

另一种方法是使用flex

使用flex，您可以设置项目的顺序;这里是flexbox的指南。供参考here

使用flex的示例：

<header>
    <div class="wrapper">
        <nav>...links...</nav>
        <div class="slider"></div>
    </div>
</header>
<section></section>

/** CSS **/
header .wrapper {
    display:flex;
    flex-direction:column;
}

@media only screen and (max-width:1136px){
    nav {
        order:2;
    }
    .slider {
        order:1;
    }
}

带有标题部分主页和页脚标记的页面布局

1 个答案: