HTML/CSS实现sticky悬浮菜单覆盖主容器的布局问题咨询

实现方案 #

你当前的核心问题是#wrapper设置了display: flex，导致内部的粘性菜单和内容区域默认按弹性项水平排列，无法产生覆盖效果，按以下步骤修改即可：

1. 拆分公共样式，仅保留导航栏（.extra）的flex布局，移除主容器#wrapper的flex属性

/* 原来的.extra和#wrapper公共样式拆分后 */
.extra {
  display:flex;
  width: 75%;
  margin: auto;
  background-color: #ccc;
}
#wrapper {
  width: 75%;
  margin: auto;
  background-color: #ccc;
  height: 800px;
}

2. 给粘性菜单#sticky添加z-index保证层级高于内容，同时添加负的margin-bottom让下方内容区域上移，产生覆盖效果

#sticky {
  position: sticky;
  position: -webkit-sticky;
  background: #f83d23;
  width: 100px;
  height: 100px;
  top: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 0 6px #000;
  color: #fff;
  /* 新增两行 */
  z-index: 99;
  margin-bottom: -100px;
}

修改后主容器会完全占满自身宽高，内容区域从左上角开始排布，粘性菜单悬浮覆盖在内容左侧，同时保留滚动到顶部后固定的粘性效果。

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