如何通过CSS使子div始终处于父div内部？

核心原因 #

子元素设置position:absolute时，会相对于最近的非static定位（relative/absolute/fixed）父元素定位。你给header设position:absolute无效，是因为absolute定位的父元素本身脱离文档流，且这不是让子元素基于父容器定位的正确方式——正确做法是给父元素设置position:relative，既不会改变父元素的正常布局，又能成为子元素的定位参考容器。

具体解决步骤 #

• 给父容器header添加position: relative属性，确立子元素的定位基准
• 调整子元素options的top/right/bottom/left属性，使其相对于header的边界定位
• 可选：给header添加overflow: hidden，强制隐藏子元素超出父容器的部分（如果子元素内容过多）

修改后的代码示例 #

HTML结构

<div class="header">
  <div class="options">操作选项</div>
</div>

CSS样式

.header {
  position: relative; /* 关键：设置为相对定位 */
  height: 60px;
  background-color: #f5f5f5;
  padding: 0 16px;
  overflow: hidden; /* 可选：隐藏超出部分 */
}

.options {
  position: absolute;
  top: 0;
  right: 16px; /* 与header的padding对应，避免贴边 */
  height: 100%;
  display: flex;
  align-items: center;
}

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