如何实现父容器内覆盖内容的粘性透明侧边菜单？

需求说明 #

• 为包含多子容器的父容器添加侧边菜单
• 菜单需满足：粘性定位（滚动时保持在父容器左上角）、透明样式、置于内容上方

现有实现代码 #

HTML代码 #

<div>
other content
</div>
<div class="parent-div">
   <div class="div-sticky-class">
     sticky menu
     <li>item</li><li>item</li><li>item</li><li>item</li>
   </div>
   <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse</div>
   <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse</div> 
   <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse</div> 
   <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse</div>
   <div>Lorem ...</div>
  <div>Lorem ...</div>  
</div>

<div>
other content  
</div>

CSS代码 #

.parent-div {
  display:block;
  background: #00ccbc;
}
.div-sticky-class{
  color: red;
  position: sticky;
  position: -webkit-sticky;
  top: 0px;
  width: 100px;
  height: 100px;
  background-color: rgba(0, 0, 245, 0.75);
}

问题分析 #

当前实现中，sticky定位的菜单属于正常文档流，会占据页面空间，导致内容被挤到菜单下方，无法实现覆盖效果；若改用absolute定位，会失去粘性滚动的特性，无法满足需求。

解决方案 #

通过以下CSS调整，实现菜单既保持粘性定位，又能覆盖在内容上方：

.parent-div {
  position: relative; /* 为sticky元素提供定位参考 */
  background: #00ccbc;
}
.div-sticky-class{
  color: red;
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  left: 0; /* 固定在父容器左上角 */
  width: 100px;
  height: 100px;
  background-color: rgba(0, 0, 245, 0.75);
  z-index: 1; /* 确保菜单在内容上层 */
  float: left; /* 脱离文档流，避免占据空间 */
  width: 0; /* 文档流中宽度设为0，让内容从父容器左上角开始 */
  overflow: visible; /* 确保菜单内容正常显示 */
}

方案说明 #

1. position: relative：给父容器添加该属性，让粘性菜单的定位参考父容器。
2. left: 0：将菜单固定在父容器的左上角。
3. z-index: 1：提升菜单层级，确保覆盖在内容上方。
4. float: left + width: 0 + overflow: visible：让菜单脱离文档流，不占据页面空间，同时保证菜单内容正常显示，实现内容从父容器左上角开始排列，菜单覆盖其上的效果。
5. 保留sticky定位：确保滚动时菜单保持在父容器内的固定位置，直到父容器完全离开视口。

替代方案 #

如果上述float方法不符合需求，也可以使用负边距实现：

.parent-div {
  position: relative;
  background: #00ccbc;
}
.div-sticky-class{
  color: red;
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
  background-color: rgba(0, 0, 245, 0.75);
  z-index: 1;
  margin-left: -100%; /* 向左偏移父容器宽度，覆盖在内容左上角 */
}

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