Constrain absolute-position red to be on top of blue

by TigerAsks

HTML

<div class="container">
    <div class="content"><!-- should be however big the container is-->
        <div class = "mask"></div> <!-- should be in front of the entire content content -->
    </div>
</div>

CSS

.container {
  height: 3em;
  width: 50%;
  border: 1px solid green;
}

.content {
  position: relative;
  box-sizing: border-box;
  height: 1em;
  width: 100%;
  border: 3px dashed blue;
}

.content .mask {
  position: absolute;
  z-index: 99;
  box-sizing: border-box;
  height: calc(100% + 6px);
  width: calc(100% + 6px);
  margin: -3px;
  border: 2px dotted red;
}