Question

我想使用CSS :before选择器创建我当前div样式的副本，并将其覆盖在我的初始div之上。但是，如果不改变:before位置，我无法做到这一点。

为什么会发生这种情况，我怎样才能确保这两者的位置始终相同？

＆＃13;

.example {
  margin: 100px;
  height: 100px;
  width: 100px;
  background-color: transparent;
  border: 5px solid red;
  border-radius: 50%;
  border-right-color: transparent;
  display: block;
}

.example:before {
  content: "";
  display: block;
  border: 5px solid yellow;
  width: 100px;
  height: 100px;
  background-color: transparent;
  border-right-color: transparent;
  border-radius: 50%;

}

＆＃13;

<div class='example'/>

＆＃13;

Answer 1

为什么会发生这种情况

因为:: before伪元素被渲染为好像它是div的第一个子元素，所以它必须在父元素的边框内。它的左上角静态位置与您认为的父级尺寸相差5px，但实际上是那些边界外部。边框呈圆形，呈圆形，乍看之下可能会混淆人们对此事物的看法。（感谢DaniP的澄清。）

因此你将110px宽和高（每边5px边框加上100px宽度/高度）的孩子粘贴到一个本身只有100px乘100px的元素中，所以它必须溢出父节点。将overflow: hidden添加到div或outline，您就会看到伪子被切断的位置。

将其叠加在我的初始div
之上

例如伪孩子的margin:-5px会这样做。

根据您最终想要达到的目标，它可能不是最好的方法。例如，如果div最终将包含实际（文本）内容，那么伪子将推动它。作为替代方案，您可以将div相对定位，并将伪子项置于绝对值，每个值为top / left -5px，以实现相同的子定位。如果需要落后于内容，请添加z-index。

css：之前，为什么我的形状不在彼此之上

1 个答案: