为何div元素边框会穿透显示至包含ul的侧边栏上层？

问题根因 #

这个边框穿透的问题和你用jQuery toggle()做的显示动效没关系，纯CSS配置缺失导致：

• 你给#sidebar设了绝对定位但没加不透明背景，元素默认是透明的，下层.description_section的下边框自然会透出来
• 定位元素没设明确的堆叠层级，浏览器渲染时可能把普通文档流里的元素边框画到侧边栏上层

直接修复 #

在你现有的#sidebar样式里补两行属性就行，原来写的绝对定位、默认隐藏这些配置都不用动：

#sidebar {
  /* 原有样式：position: absolute; display: none; 等全部保留 */
  background: #fff; /* 替换为你设计稿里侧边栏对应的背景色，不要留透明值 */
  z-index: 999; /* 数值只要比页面普通内容的堆叠层级高即可，常规场景写999足够覆盖 */
}

额外排查项 #

加完样式仍有穿透问题的话，检查两个点：

• 确认.description_section没有设置position属性搭配高于999的z-index值，若存在该配置，把侧边栏的z-index调整到更高数值即可
• 如果你刻意给侧边栏设置了半透明背景（比如rgba(255,255,255,0.8)），透出下层边框是半透明效果的正常表现，需要完全遮挡就把颜色透明度调整为1

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