css显示固定标题上方的内容

Question

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

我只是想创建一个＆＃39;外部标题＆＃39;在我的主导航标题上方，显示一些指向社交网站的链接。

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

以下是代码 - 或查看此codepen。

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

＆＃13;

＆＃13;

* {
  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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

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

将position属性添加到此类中。

* {
  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>

Answer 2

你的标题是使用fixed位置所以我建议将标题向下移动等于它的高度（如果高度没有变化），在这种情况下EG 80px。

.header {
    top: 80px;
}

＆＃13;

＆＃13;

* {
  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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;