如何解决CSS中按钮覆盖固定定位顶部导航栏的定位问题

问题原因 #

这是CSS层叠上下文的层级排序规则导致的：

• 代码中.topnav设置了position: fixed，.card-button设置了position: relative，两者都属于定位元素（position属性值非static）
• 定位元素默认z-index为auto，此时浏览器会按照DOM元素的书写顺序判定层级：后出现的定位元素层级高于先出现的定位元素
• 导航栏是页面头部最先渲染的元素，卡片按钮是后续内容区的元素，所以按钮的默认层级高于固定导航，滚动时就会出现在导航上方。

解决方法 #

直接给固定导航的CSS规则添加一个足够高的z-index值，强制让它的层级高于页面内所有其他内容即可，修改后的.topnav规则如下：

.topnav {
  overflow: hidden;
  background-color: #F5CB5C;
  list-style-type: none;
  text-align: center;
  margin: 0;
  padding: 0;
  position: fixed;
  top: 0;
  width: 100%;
  /* 新增以下规则，数值只要比页面其他定位元素的z-index高即可 */
  z-index: 999;
}

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