CSS Z-index: How do I get the title bar to display on top?

Question

attempting to make a simple layout and have hit a dead end. I am trying to make a page that perfectly fits the screen such that there is no scrolling what-so-ever. Basically, in the included code, I'd like to have the reddish title bar (at the top) display on top of the yellowish container. The height of the yellowish container is set to 100vh so as to span the height of the viewport. In this way, the page will be perfectly sized such that you will never need to scroll.

I think it has to do with the z-index...which I thought I understood up until this point. I've watched videos, read articles, and tried everything I could think of. My last resort is trying my luck online.

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

Do this if you want you navbar to always stick at the top.

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>

Answer 2

You need to set z-index for header. Ex:

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

If you need your header should stick at the top of the screen. add positioning. ex:

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

Answer 3

Welcome to SO!

Using position relative with z-index solved the issue on header

When you set position: relative on an element then you establish a new containing block. All positioning inside that block is with respect to it.

Setting z-index on an element inside that block will only alter its layer with respect to other elements inside the same block.

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>