Overlay video element with div elements

Question

I am trying to overlay the video element with a series of div elements, but for some reason, the div elements appear below the div element itself, as opposed to on the div element.

What would be the best way of going around fixing this:

.video-item-duration-container {
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  color: #fff;
  background-color: #000;
  -webkit-font-smoothing: antialiased;
  font-size: 8px;
  font-weight: 400;
  display: inline-flex;
  line-height: 16px;
  position: absolute;
  bottom: 4px;
  left: 4px;
}

.video-item-button-container {
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
  font-size: 1rem;
  display: inline-block;
  color: #fff;
  height: 16px;
  letter-spacing: .6px;
  line-height: 16px;
  font-weight: 700;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color .15s ease-in-out;
  outline: none;
  border-radius: 8px;
  padding: 0 6px;
  padding-right: 5.7px;
  cursor: pointer;
  border: 0;
  margin: 0;
  background-color: rgba(14,19,24,.7);
}

.video 

<div>
  <video
    width="100%"
  >
    <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4" type="video/mp4" />
  </video>
  <span class="video-item-duration-container">
    3:20
  </span>
  <button class="video-item-button-container">
    <span aria-hidden="true" class="vpQagg uRWxVA dkWypw"
      ><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
        <path
          fill="currentColor"
          d="M3.25 9.25a1.25 1.25 0 1 1 0-2.5 1.25 1.25 0 0 1 0 2.5zm4.75 0a1.25 1.25 0 1 1 0-2.5 1.25 1.25 0 0 1 0 2.5zm4.75 0a1.25 1.25 0 1 1 0-2.5 1.25 1.25 0 0 1 0 2.5z"
          fill-rule="evenodd"
        ></path></svg
    ></span>
  </button>
</div>

Answer 1

You need to set a z-index which is higher for the overlaying elements than the video.