时间戳

首页 > 解决方案 > 具有嵌套固定属性的 CSS 定位

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

问题描述

.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>

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

标签： htmlcss

解决方案

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

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

推荐阅读