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

【问题标题】：CSS Positioning with nested fixed property具有嵌套固定属性的 CSS 定位
【发布时间】：2019-01-24 05:52:16
【问题描述】：

.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"> 不重叠这两个跨度有什么区别，为什么表现不同？

【问题讨论】：

请阅读Something on my web site doesn't work. Can I just paste a link to it?。当外部资源消失或固定时，依赖于外部资源来理解的问题变得毫无用处。创建一个minimal reproducible example 并将其放入问题本身。

标签： html css

【解决方案1】：

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

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

【讨论】：

我同意，但我想知道为什么一个跨度落后而一个跨度元素在顶部