具有嵌套固定属性的CSS定位

Question

.a{
  position:fixed;
  top:0px;
  left:0px;
  height:100%;
  width:100%;
  background:yellow;
  z-index:1000000

}

.b{
  position:fixed;
  color:green;
  background:pink;
  left:60px;

}

.c{
  position:relative;
 
}

.d{
  position:static;
 
}

<div class="a">

  <div class="b">
  c is overlapping d is not
  </div>
  <span class="c">
overlaping sibling
  </span>
  <span class="d">
  i    am    not a overlapping     sibling
</span>
</div>

Click here for JSFiddle 在上面的小提琴中，我有一个html，请通过它解释一下为什么 <span class="c">在<div class = "b">上重叠，以及为什么<span class="d">在<div class = "b">上不重叠 这两个跨度之间有什么区别，为什么表现不同？

Answer 1

因为<span class="d">有position:static。如果您想了解更多，可以参考下面的链接。谢谢

https://www.w3schools.com/cssref/pr_class_position.asp