CSS将绝对位置div限制为父大小[重复]

Question

所以我需要一个覆盖其整个父级的 div。 （需要在前面监听事件，所以z-index需要高于parent。）

如果父级没有固定大小，我该怎么做？

例如：https://jsfiddle.net/CypherK/hdgko1L4/

<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 -->
    </div>
</div>

.container {
  height: 3em;
  width: 50%; /*could be anything*/
  border: 1px solid green;
}

.content {
  height: 1em;
  width: 100% - 6px; /*intention: as big as container, minus own borders*/
  border: 3px dashed blue;
}

.content .mask {
  position: absolute;
  z-index: 99;
  height: calc(100% + 6px); /*intention: as big as content, including its borders*/
  width: calc(100% + 6px); /*intention: as big as content, including its borders*/
  margin: -3px; /*intention: place on border of parent*/
  border: 2px dotted red;
}

Answer 1

1) 使用box-sizing: border-box 以避免计算边界

2) 在.content 上设置position: relative

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

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

.content .mask {
  position: absolute;
  z-index: 99;
  right: -3px;
  bottom: -3px;
  left: -3px;
  top: -3px;
  border: 2px dotted red;
}

<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>