为何未设置relative/absolute定位时:before伪元素未显示在div上方？

这问题问得很到位！咱们一步步拆解清楚：

先看你给出的代码：

div { 
  width: 100px; 
  height: 100px; 
  background: red; 
} 
div:before { 
  content: ""; 
  width: 100px; 
  height:30px; 
  background: yellow; 
}

第一点：伪元素默认是行内元素，宽高设置无效 #

:before和:after伪元素的默认display值是inline，而行内元素的宽高完全由自身内容决定——你给伪元素设了content: ""（空内容），再加上行内元素不支持手动设置宽高，所以这个伪元素实际上是没有尺寸的，自然就看不到啦！

如果想让宽高生效，你得先把伪元素改成块级或者行内块元素：

div:before { 
  content: ""; 
  width: 100px; 
  height:30px; 
  background: yellow; 
  display: block; /* 或者 inline-block */
}

这时候你会看到div顶部出现一个黄色的条，但它是作为div的第一个子元素存在于内容流里的，并不是“覆盖”在div的上方——如果div里有其他内容，这个黄色块会把内容往下挤。

第二点：要“覆盖”在div上方，需要定位来脱离正常流 #

你说的“显示在div元素上方”，应该是指伪元素层叠在div的背景之上（甚至可以覆盖整个div），而不是在内容流里占位置。这时候就需要用到定位：

• 把父元素div设为position: relative，这样它会成为伪元素的定位上下文；
• 把伪元素设为position: absolute，让它脱离正常流，相对于div进行定位。

修改后的代码：

div { 
  width: 100px; 
  height: 100px; 
  background: red; 
  position: relative; /* 作为定位上下文 */
} 
div:before { 
  content: ""; 
  width: 100px; 
  height:30px; 
  background: yellow; 
  position: absolute; /* 脱离正常流 */
  top: 0; 
  left: 0;
}

这时候黄色伪元素就会精准地覆盖在div的顶部，不会影响div的内容流，完全是“浮”在div上方的效果。

总结一下 #

• 没设置定位时，伪元素默认是行内元素，宽高无效→看不到；
• 改成块级元素后，它在div的内容流里，不是“覆盖”的效果；
• 只有通过relative+absolute定位，才能让伪元素脱离流，真正层叠在div上方。

内容的提问来源于stack exchange，提问作者LearningMath