css 显示固定以上的内容 header

Question

如何在固定 header 上方显示内容？

我只是想在我的主导航 header 上方创建一个 'outer header' 以显示一些指向社交网站的链接。

我已经创建了 HTML 标记，但我无法使用 CSS 直观地翻译它。

下面是代码 - 或者查看这个 codepen。

本质上，我希望 social ul with list items 1,2,3 & 4 高于全局导航

* {
  box-sizing: border-box;
}

ul,
ol {
  list-style: none;
  margin: 0px;
  padding: 0px;
}

.header {
  position: fixed;
  width: 100%;
  top: 0;
  border-bottom: 1px solid #ddd;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}

.menu li {
  padding-right: 50px;
  margin-right: 20px;
}

.header .menu ul {
  margin: 0;
  padding: 0;
}

.header .menu ul li {
  display: inline-block;
  list-style: none;
}

.header .menu ul li a {
  text-decoration: none;
  display: block;
  padding: 30px 20px;
}

<div id="global-social" class="outer-header col-1">
  <div class="container">
    <nav>
      <ul class="social">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
      </ul>
    </nav>
  </div>
</div>
<div id="global-navigation">
  <!-- Global Header -->
  <header class="header">
    <div class="logo">
      <a href="">
        <!--<img src="images/rare-logo.png">-->
        <h1>Rare Select</h1>
      </a>
    </div>
    <nav class="menu">
      <ul>
        <li><a href="">HOME</a></li>
      </ul>
    </nav>
  </header>
</div>

Answer 1

您的页眉使用的是 fixed 位置，因此我建议将页眉向下移动等于其高度（前提是高度不变），在这种情况下为 80px。

.header {
    top: 80px;
}

* {
  box-sizing: border-box;
}

ul,
ol {
  list-style: none;
  margin: 0px;
  padding: 0px;
}

.header {
  position: fixed;
  width: 100%;
  top: 80px;
  border-bottom: 1px solid #ddd;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}

.menu li {
  padding-right: 50px;
  margin-right: 20px;
}

.header .menu ul {
  margin: 0;
  padding: 0;
}

.header .menu ul li {
  display: inline-block;
  list-style: none;
}

.header .menu ul li a {
  text-decoration: none;
  display: block;
  padding: 30px 20px;
}

<div id="global-social" class="outer-header col-1">
  <div class="container">
    <nav>
      <ul class="social">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
      </ul>
    </nav>
  </div>
</div>
<div id="global-navigation">
  <!-- Global Header -->
  <header class="header">
    <div class="logo">
      <a href="">
        <!--<img src="images/rare-logo.png">-->
        <h1>Rare Select</h1>
      </a>
    </div>
    <nav class="menu">
      <ul>
        <li><a href="">HOME</a></li>
      </ul>
    </nav>
  </header>
</div>

Answer 2

如果您希望两个菜单都保持不变，我建议将它们都包装在一个新容器中（在下面的代码片段中，我给了它 class wrapper）。

改为将 position 属性添加到此 class。

* {
  box-sizing: border-box;
}

.wrapper {
  position: fixed;
  width: 100%;
  top: 0;
  border-bottom: 1px solid #ddd;
}

ul,
ol {
  list-style: none;
  margin: 0px;
  padding: 0px;
}

.header {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}

.menu li {
  padding-right: 50px;
  margin-right: 20px;
}

.header .menu ul {
  margin: 0;
  padding: 0;
}

.header .menu ul li {
  display: inline-block;
  list-style: none;
}

.header .menu ul li a {
  text-decoration: none;
  display: block;
  padding: 30px 20px;
}

<div class="wrapper">
  <div id="global-social" class="outer-header col-1">
    <div class="container">
      <nav>
        <ul class="social">
          <li>1</li>
          <li>2</li>
          <li>3</li>
          <li>4</li>
        </ul>
      </nav>
    </div>
  </div>
  <div id="global-navigation">
    <!-- Global Header -->
    <header class="header">
      <div class="logo">
        <a href="">
          <!--<img src="images/rare-logo.png">-->
          <h1>Rare Select</h1>
        </a>
      </div>
      <nav class="menu">
        <ul>
          <li><a href="">HOME</a></li>
        </ul>
      </nav>
    </header>
  </div>
</div>

css 显示固定以上的内容 header

css displaying content above fixed header

html

css

nav