html - 使一个元素出现在一个元素的后面但被放置在它的内部

Question

是否可以让一个元素出现在父元素的后面？

像这样

<div style="background-color:blue;">
   blue
  <div style="margin:0 0 0 0 -10px;background-color:red;">red</div>
</div>

蓝色 div 覆盖红色 div，但左侧有 10 个像素突出？

Answer 1

是的，可以使用position:

<div style="background-color:blue;position:relative;">
  blue
  <div style="background-color:red;position:relative;left:-10px;">red</div>
</div>

如果你想让它们都在同一行，那么你需要把 top: 0; 和 position:absolute 也放在一起。

<div style="background-color:blue;position:relative;">
  blue
  <div style="background-color:red;position:absolute;left:-10px;top:0;z-index:-1;">red</div>
</div>