相对定位伪元素和绝对定位伪元素的区别

Question

考虑以下三种情况:

场景一:

div {
  width: 100px;
  height: 100px;
  background-color: black;    
}
div:before {
  content: "";
  width: 10px;
  height: 10px;
  background-color: darkred;
  position: relative;
}

场景二:

div {
  width: 100px;
  height: 100px;
  background-color: black;    
}
div:before {
  content: "";
  width: 10px;
  height: 10px;
  background-color: darkred;
  position: absolute;
}

场景三:

div {
  width: 100px;
  height: 100px;
  background-color: black;    
}
div:before {
  content: "";
  width: 10px;
  height: 10px;
  background-color: darkred;
  display:block;
  position: relative;
}

场景一(相对位置)不显示darkred伪元素。但是当它变成position:absolute时，pseudo元素是可见的。此外，如场景三所示，当我向场景一(相对位置)添加display:block属性时，元素是可见的。

为什么relative位置需要display:block而absolute不需要?

Answer 1

伪类(如:before)的display CSS属性默认值为inline。

display: inline;和position: relative;的元素默认情况下不是"块级"元素，如果它们没有内容，它们不占用任何宽度。因此，如果您没有声明display: block;，并且您有一个像content: "";这样的空内容声明，那么它在场景1中根本不会占用任何宽度。

position: absolute;的元素被从流中取出，并且是默认display CSS属性值为block的"块级"元素。因此，场景2呈现:before伪元素，遵循其宽度和高度声明。

场景3是成功的，因为display属性已经被显式地设置为block，它遵循宽度和高度声明。

你可以通过检查浏览器的web开发工具中的:before元素来看到这些默认值的设置——参见工具的"elements"检查器。