CSS Z-index：如何使标题栏显示在顶部？

Question

这里的新编码器，试图做一个简单的布局，却走到了穷途末路。我正在尝试制作一个完全适合屏幕的页面，这样就不会滚动了。基本上，在随附的代码中，我希望在淡黄色容器的顶部显示带红色标题的栏（在顶部）。淡黄色容器的高度设置为100vh，以跨越视口的高度。这样，页面将具有完美的大小，因此您无需滚动。

我认为这与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

您需要为标题设置z-index。例如：

header{
  display: block;
  z-index: 9999
}

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

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