固定元素溢出父固定元素的浏览器兼容问题及层级显示咨询

我来帮你搞定这个让人头疼的跨浏览器兼容性问题！你遇到的情况是不同浏览器对嵌套固定定位元素的渲染逻辑有差异，导致子元素在Chrome被滚动条遮挡、IE/Edge鼠标碰滚动条就消失，只有Firefox符合预期。下面给你两种可行的解决方案：

方案1：改用absolute定位替代子元素的fixed #

既然父容器已经是position: fixed，子元素用absolute定位完全可以满足需求，还能彻底解决跨浏览器的差异问题。修改后的代码如下：

调整后的CSS #

#div1 { 
  position: fixed; 
  z-index: 5; 
  overflow-y: scroll; 
  width: 200px; 
  height: 100px; 
  background-color: red; 
}
#sublist { 
  position: absolute; /* 把fixed换成absolute */
  visibility: hidden; 
  z-index: 10; 
  left: 180px; 
  top: 0; 
  background-color: green; 
}

HTML和jQuery代码保持不变即可。这样修改后，子元素会相对于父固定容器定位，既不会被父元素的滚动条遮挡，hover行为在所有浏览器里也能保持一致——再也不会出现IE/Edge里碰滚动条就消失的情况了。

方案2：保留fixed定位的优化方案 #

如果你因为业务需求必须保留子元素的fixed定位，可以试试这两个小调整：

• 避免滚动条遮挡：给父容器加padding-right，把滚动条的位置空出来，不让它挡住子元素：

#div1 {
  /* 原有样式不变 */
  padding-right: 15px; /* 数值可以根据浏览器滚动条宽度微调 */
  box-sizing: border-box;
}

• 修复IE/Edge的hover异常：把hover事件换成mouseenter和mouseleave，并判断鼠标是否移到了子元素上，避免误触发隐藏：

$("#listitem").on('mouseenter', function() { 
  $("#sublist").css({visibility: "visible"}); 
}).on('mouseleave', function(e) {
  // 只有当鼠标离开后没进入子元素时，才隐藏子列表
  if (!$(e.relatedTarget).closest('#sublist').length) {
    $("#sublist").css({visibility: "hidden"}); 
  }
});

补充：为什么Firefox表现正常？ #

Firefox对position: fixed的渲染严格遵循W3C标准，固定元素会完全脱离父容器的滚动上下文，始终相对于浏览器视口定位，所以不会被父元素的滚动条遮挡，hover行为也不受滚动条干扰。

内容的提问来源于stack exchange，提问作者Manuel Taber