CSS 将绝对位置 div 限制为父大小

Question

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

如果父级没有固定尺寸，我该怎么做？

例如：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>

CSS 将绝对位置 div 限制为父大小

CSS constrain absolute-position div to parent size

html

css

css-position