如何实现子元素相对父元素动态定位且不占用原空间？

没问题，完全不用修改现有DOM结构就能实现你要的效果！核心是利用CSS的绝对定位结合相对定位的父容器，既能让子菜单跟着父元素动态移动，又不会占用原文档流空间。

具体实现步骤： #

1. 给外层容器 .entry-options 设置 position: relative，让它成为内部绝对定位元素的定位上下文——这样.submenu2的位置会相对于.entry-options计算，而不是整个页面。
2. 给 .submenu2 设置 position: absolute，这会让它脱离正常文档流，完全不影响.entry-options的高度和宽度（.entry-options的尺寸依旧只由.menu1和.menu2决定）。
3. 通过调整top属性把.submenu2移到.entry-options上方，同时用left控制水平对齐。

示例CSS代码： #

/* 为外层容器建立定位上下文 */
.entry-options {
  position: relative;
  /* 保留你原本的样式，比如高度、背景、flex布局等 */
  display: flex;
  height: 50px;
  background: #f5f5f5;
  align-items: center;
  padding: 0 10px;
}

/* 子菜单的核心样式 */
.submenu2 {
  position: absolute;
  /* 向上移动到entry-options的上方，10px是可选的间距 */
  top: calc(-100% - 10px);
  left: 0;
  /* 让子菜单宽度和entry-options一致 */
  width: 100%;
  /* 你的子菜单自定义样式 */
  background: #ffffff;
  padding: 15px;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
}

为什么这个方案符合你的需求： #

• 不占用原空间：绝对定位的元素脱离文档流，.entry-options的高度/宽度完全不受.submenu2影响，只由.menu1和.menu2决定。
• 随父元素动态移动：因为.entry-options是相对定位的定位上下文，当页面滚动或者.entry-options本身位置变化时，.submenu2会自动跟着移动，不会像position: fixed那样固定在视口。
• 无需修改DOM：纯CSS实现，完全保留你现有的结构。

额外注意点： #

• 如果.entry-options设置了overflow: hidden，需要移除这个属性，否则.submenu2会被容器截断看不到。
• 如果.submenu2的高度不固定，可以把top换成bottom: 100%，这样不管子菜单多高，都会刚好贴在.entry-options的上方，不用手动计算高度。

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