设置div的:before伪元素后内容溢出fixed header，求助解决方案

问题根源 #

fixed定位的元素本身会创建堆叠上下文，但如果伪元素所在的父div通过transform、filter、带z-index的定位属性等创建了独立的堆叠上下文，header的z-index就只能在自己的父堆叠上下文里生效，没法突破到外部覆盖伪元素。

具体解决办法 #

• 排查父div的堆叠上下文属性：检查目标div有没有transform（非none）、filter（非none）、perspective（非none），或者position设为relative/absolute且加了z-index的情况。这些属性会让div创建自己的堆叠上下文，把伪元素“框”在里面，导致header的z-index失效。能删就删，比如把transform改成transform: none。
• 确保header在根堆叠上下文：如果header被包在某个带堆叠上下文的父元素里，直接把它移到body的直接子元素下，然后给它设个足够大的z-index：

  header {
    position: fixed;
    z-index: 9999; /* 数值够大就行，比如9999 */
    /* 其他样式 */
  }
  

• 给伪元素加定位和低z-index：如果父div必须保留堆叠上下文属性，给:before伪元素加上定位（比如absolute），再设个比header小的z-index：

  .target-div:before {
    content: '';
    position: absolute;
    z-index: 1;
    /* 你的背景色、宽高样式 */
  }
  

  注意：伪元素没定位的话，z-index是不生效的，必须先加position属性。
• 强制给header创建高优先级堆叠上下文：要是上面的方法都不管用，给header加transform: translateZ(0)，强制生成新的堆叠上下文，确保层级压过伪元素：

  header {
    position: fixed;
    z-index: 9999;
    transform: translateZ(0);
  }
  

内容的提问来源于stack exchange，提问作者Faruk Islam Farabi