Question

我使用SO构建帮助HTML CSS Grid / Flexbox组合布局，并取得了很大的进步。但是现在我有一个问题，就是显示一个名为class mobile_nav的附加div。

应该在用户点击SWITCH时激活它（我可以谷歌这一点，因此不是问题的一部分）并在DIV <div class="section site-menu">和DIV <div class="section site-header">之间显示（这就是我想要哪个不起作用）。所以最好把它称为移动导航。

有人能看到它的错误吗？

CodePen

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}

.site-wrapper {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
}

.site-menu {
  background-color: #000;
  color: #fff;
  position: absolute;
  /* padding: 8px 20px 9px; */
  width: 100%;
  z-index: 1;
}

.hero {
  background-image: url('https://wallpaperbrowse.com/media/images/landscape-mountains-nature-clouds.jpg');
  background-size: cover;
  background-position: center;
  width: 100wh;
  height: 100vh;
  display: flex;
}

.hero-content {
  background-color: #000;
  color: #fff;
  display: block;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex-directon: column;
  margin: auto;
}

.bottom-right {
  position: absolute;
  right: 0;
  margin-top: -1.2em;
  background: black;
  color: white;
}

#nav,
#left_side,
#top_nav,
#bottom_nav {
  display: flex;
}

#nav {
  border-bottom: 1px solid grey;
}

#title {
  margin-left: 10px;
}

#menu_switch {
  margin-right: 10px;
}

#left_side {
  flex-direction: column;
  width: 100%;
}

#top_nav {
  display: flex;
  justify-content: flex-end;
  height: 60px;
  border-bottom: 1px solid grey;
  align-items: center;
}

.left {
  margin-right: auto;
}

#bottom_nav {
  align-items: center;
  height: 38px;
}

.nav_item {
  padding: 5px;
}

.nav_item:first-child {
  background-color: red;
  margin-left: 10px;
}

#logo {
  background-color: black;
  margin-left: 24px;
  height: 100px;
}

<div class="site-wrapper">
  <div class="section site-menu">
    <div id="nav">
      <div id="logo">
        100x100px Logo
      </div>
      <div id="left_side">
        <div id="top_nav">
          <div id="title" class="nav_item left">TITLE OF PAGE</div>
          <div id="menu_about" class="nav_item right">ABOUT</div>
          <div id="menu_signup" class="nav_item right">SIGN UP</div>
          <div id="menu_follow" class="right nav_item">FOLLOW</div>
          <div id="menu_switch" class="right nav_item">SWITCH</div>
        </div>
        <div id="bottom_nav">
          <div class="nav_item">AZURE</div>
          <div class="nav_item">SHAREPOINT</div>
          <div class="nav_item">BI & DWH</div>
          <div class="nav_item">.NET DEVELOPMENT</div>
          <div class="nav_item">MOBILE DEVELOPMENT</div>
          <div class="nav_item">WORDPRESS</div>
          <div class="nav_item">NOTES</div>
        </div>
      </div>
    </div>
  </div>
  <div class="section mobile_nav">
    <div>dlfdh afj hdslf</div>
    <div>bla bla bla</div>
  </div>
  <div class="section site-header">
    <div class="hero">
      <div class="hero-content">
        <h1>If you can dream it, you can do it...</h1>
        <p class="subhead">lets do it !</p>
      </div>
    </div>
    <div class="bottom-right">
      <span>This text should be positioned at the bottom right of the Hero Image</span>
    </div>
  </div>
  <div class="section undefined">
    <div class="undefined-content">
      <p>Lots of content will go in here</p>
    </div>
  </div>
  <div class="section site-footer">Footer</div>
</div>

Answer 1

您只需要将.site-menu div位置设置为亲戚。

它被设置为绝对值，因此不在相对层次结构中。

请查看此页面，了解position属性，https://www.w3schools.com/css/css_positioning.asp它的解释非常好

修改

实际上你可以删除位置属性。如果您未指定任何内容，则该位置为static，因此项目将位于另一个之下。另一个可能对您有用的链接：CSS Display

在两个其他DIV之间显示HTML DIV

1 个答案: