无法将img.head与.div3堆叠于.parent内，布局异常求助

问题根源 #

1. .parent 虽设置了 position: relative，但内部 img.head 用绝对定位脱离了文档流，导致 .parent 没有高度，视觉上图片像不在容器里
2. img.head 的绝对定位未基于 .parent 调整位置，导致和上方元素重叠
3. div.div3 用 margin 定位是基于文档流的，无法相对于 .parent 精准定位

解决方案 #

1. 给 .parent 设置明确尺寸，确保能包裹内部元素
2. 调整 img.head 的定位属性，让它相对于 .parent 正确放置
3. 修改 div.div3 的定位方式，基于 .parent 实现精准堆叠

修改后的CSS代码 #

body {
  background-color: black;
  margin: 0; /* 清除默认边距避免布局偏移 */
}

div.div1 {
  width: 100%;
  height: 80px;
  background-color: white;
  color: black;
  float: left;
}

div.div2 {
  width: 100%;
  height: 60px;
  background-color: green;
  color: black;
  float: left;
}

div.div3 {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 平移自身实现居中 */
  position: absolute;
  background-color: white;
  padding: 10px 20px;
  cursor: pointer;
}

div.parent {
  margin-top: 200px;
  position: relative;
  background-color: white;
  width: 90%;
  height: 800px; /* 与图片尺寸匹配 */
  margin-left: auto;
  margin-right: auto; /* 容器水平居中 */
}

p.one {
  float: left;
  padding-left: 10px;
  font-size: 20px;
  font-family: 'Courier New', Courier, monospace;
  margin: 0; /* 清除默认边距 */
  line-height: 80px; /* 文字垂直居中 */
}

p.two {
  float: left;
  padding-left: 10px;
  font-size: 20px;
  font-family: 'Times New Roman', Times, serif;
  margin: 0;
  line-height: 60px;
}

img.haus {
  float: left;
  height: 50px;
  width: 50px;
  margin-top: 5px;
}

img.head {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0; /* 填满父容器 */
}

关键修改说明 #

• 给 .parent 设置与图片匹配的宽高，同时添加自动外边距实现水平居中，确保容器能包裹住图片
• img.head 设置宽高100%并通过top:0; left:0填满父容器
• div.div3 用top/left加平移实现相对于父容器的居中定位，替代原来的margin方式
• 清除p标签默认边距并设置行高，优化顶部导航的文字垂直居中效果

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