停止 child 覆盖 parent 大纲？

Question

由于某些元素在幻灯片中，我使用带负偏移的轮廓而不是边框。

但是 child 元素覆盖了轮廓，但我想要在它们上面加边框。我用它来构建内容。

.parent {
 position:relative; outline: green 3px solid;
  outline-offset:0px;
background-color:pink;
pading:5px;
overflow:hidden;
}
.child {position:relative; top:26px; background-color:yellow;
display:inline;
}

Answer 1

添加 z-index 将解决您的问题：

.parent {
  position:relative; outline: green 3px solid;
  outline-offset: -3px;
background-color:pink;
pading:5px;
overflow:hidden;
z-index:999;
}
.child {position:relative; top:23px; background-color:yellow;
display:inline;
z-index:-1
}

z-index 属性指定堆叠顺序较高的 element.An 元素的堆叠顺序始终位于堆叠顺序较低的元素之前。

注意：z-index 仅适用于定位元素（position:absolute，position:relative，或position:fixed）。

Answer 2

大纲可以使用:after伪元素并添加position: absolute.

.parent {
  position: relative;
  background-color: pink;
  overflow: hidden;
}
.parent:after {
  width: 100%;
  height: 100%;
  content: '';
  outline: green 3px solid;
  outline-offset: -3px;
  position: absolute;
  top: 0;
  left: 0;
}
.child {
  position: relative;
  top: 23px;
  background-color: yellow;
  display: inline;
}
p {
  margin: 0;
}

<div class="parent">
  <div class="child">lorem ipsum doler sit amet</div>
  <p>text here</p>
</div>

停止 child 覆盖 parent 大纲？

stop child covering parent outline?

css

outline