CSS Z-index：如何让标题栏显示在顶部？ [复制]

Question

试图做一个简单的布局并遇到了死胡同。我正在尝试制作一个完全适合屏幕的页面，这样就不会滚动任何内容。基本上，在包含的代码中，我希望在黄色容器的顶部显示带红色的标题栏（在顶部）。黄色容器的高度设置为100vh，以跨越viewport的高度。这样一来，页面的大小将完美调整，您永远不需要滚动。

我认为这与z-index...有关，直到这一点我才明白。我看过视频，阅读文章，并尝试了我能想到的一切。我最后的办法是在网上碰碰运气。

body,
html {
  height: 100%;
  margin: 0;
}

.bg {
  background-color: rgb(171, 171, 175);
}

header h1 {
  text-align: center;
  position: relative;
  margin: 0;
  padding-top: 0.8rem;
  background-color: coral;
}

.flex-container {
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.content-box {
  border: solid 6px #e7c022;
  border-radius: 0.8rem;
  height: 45%;
  background-color: rgba(128, 128, 128, 0.7);
}

.main-container {
  position: relative;
  z-index: 1;
  height: 100vh;
  width: 55vw;
  max-width: 700px;
  background-color: burlywood;
}

.code-container {
  height: 80%;
  align-items: center;
}

.key-container {
  height: 20%;
  align-items: center;
}

.key-code {
  font-size: 20rem;
  font-family: 'Yellowtail', cursive;
}

.key {
  height: 30%;
  width: 20%;
  border: solid 4px #e7c022;
  border-radius: 0.5rem;
  text-align: center;
  margin-bottom: 3rem;
  font-size: 40px;
  font-family: 'Share Tech Mono', monospace;
}

.key div {
  margin-bottom: 0.2rem;
}

<div class="bg">
  <header>
    <h1>Titlebar</h1>
  </header>
  <div class="flex-container main-container">
    <div class="content-box">
      <div class="flex-container code-container">
        <div class="key-code">
          <span>65</span>
        </div>
      </div>
      <div class="flex-container key-container">
        <div class="flex-container key">
          <div>a</div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

你需要为 header 设置 z-index。例如：

header{
  position: relative;
  z-index: 9999
}

如果您需要，您的标题应放在屏幕顶部。添加定位。例如：

header{
  position: fixed;
  top: 0; 
  width: 100%;
  z-index: 9999
}

Answer 2

欢迎来到 SO！

使用位置relative 和z-index 解决了header 上的问题

当你在一个元素上设置 position: relative 然后你建立一个新的 包含块。该块内的所有定位都相对于 它。

在该块内的元素上设置 z-index 只会改变其 层相对于同一块内的其他元素。

body,
html {
  height: 100%;
  margin: 0;
}

.bg {
  background-color: rgb(171, 171, 175);
}
header {
    z-index: 11;
    position: relative;
}
header h1 {
  text-align: center;
  position: relative;
  margin: 0;
  padding-top: 0.8rem;
  background-color: coral;
}

.flex-container {
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.content-box {
  border: solid 6px #e7c022;
  border-radius: 0.8rem;
  height: 45%;
  background-color: rgba(128, 128, 128, 0.7);
}

.main-container {
  position: relative;
  z-index: 1;
  height: 100vh;
  width: 55vw;
  max-width: 700px;
  background-color: burlywood;
}

.code-container {
  height: 80%;
  align-items: center;
}

.key-container {
  height: 20%;
  align-items: center;
}

.key-code {
  font-size: 20rem;
  font-family: 'Yellowtail', cursive;
}

.key {
  height: 30%;
  width: 20%;
  border: solid 4px #e7c022;
  border-radius: 0.5rem;
  text-align: center;
  margin-bottom: 3rem;
  font-size: 40px;
  font-family: 'Share Tech Mono', monospace;
}

.key div {
  margin-bottom: 0.2rem;
}

<div class="bg">
  <header>
    <h1>Titlebar</h1>
  </header>
  <div class="flex-container main-container">
    <div class="content-box">
      <div class="flex-container code-container">
        <div class="key-code">
          <span>65</span>
        </div>
      </div>
      <div class="flex-container key-container">
        <div class="flex-container key">
          <div>a</div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 3

如果您希望导航栏始终位于顶部，请执行此操作。

body,
html {
  height: 100%;
  margin: 0;
}

.bg {
  background-color: rgb(171, 171, 175);
}
header {
    z-index: 11;
    position: fixed;
width:100%
}
header h1 {
  text-align: center;
  position: relative;
  margin: 0;
  padding-top: 0.8rem;
  background-color: coral;
}

.flex-container {
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.content-box {
  border: solid 6px #e7c022;
  border-radius: 0.8rem;
  height: 45%;
  background-color: rgba(128, 128, 128, 0.7);
}

.main-container {
  position: relative;
  z-index: 1;
  height: 100vh;
  width: 55vw;
  max-width: 700px;
  background-color: burlywood;
}

.code-container {
  height: 80%;
  align-items: center;
}

.key-container {
  height: 20%;
  align-items: center;
}

.key-code {
  font-size: 20rem;
  font-family: 'Yellowtail', cursive;
}

.key {
  height: 30%;
  width: 20%;
  border: solid 4px #e7c022;
  border-radius: 0.5rem;
  text-align: center;
  margin-bottom: 3rem;
  font-size: 40px;
  font-family: 'Share Tech Mono', monospace;
}

.key div {
  margin-bottom: 0.2rem;
}

<div class="bg">
  <header>
    <h1>Titlebar</h1>
  </header>
  <div class="flex-container main-container">
    <div class="content-box">
      <div class="flex-container code-container">
        <div class="key-code">
          <span>65</span>
        </div>
      </div>
      <div class="flex-container key-container">
        <div class="flex-container key">
          <div>a</div>
        </div>
      </div>
    </div>
  </div>
</div>