产品模块图片布局调试求助：main-product-image定位问题

核心思路 #

用Flexbox布局替代absolute定位——既能保证元素不脱离文档流，避免父容器高度塌陷等问题，又能轻松实现图片左、信息右的分栏结构，同时满足图片半透明、位于header下方的需求。

代码调整方案 #

基础HTML结构（确保层级清晰） #

<section class="product-section">
  <img src="你的产品图片地址" alt="产品主图" class="main-product-image">
  <div class="product-info">
    <div class="product-price">¥99.00</div>
    <div class="product-details">
      <h3>产品名称</h3>
      <p>产品描述内容，可根据实际需求调整...</p>
      <button>加入购物车</button>
    </div>
  </div>
</section>

CSS调整代码 #

/* 保留原有header样式，确保section自然位于其下方 */
header {
  height: 80px;
  background-color: #ffffff;
  border-bottom: 1px solid #eeeeee;
}

.product-section {
  /* Flex布局实现左右分栏，元素不脱离文档流 */
  display: flex;
  align-items: flex-start; /* 顶部对齐，匹配参考效果 */
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto; /* 可选：模块居中 */
}

.main-product-image {
  width: 40%; /* 可根据参考图调整宽度比例 */
  opacity: 0.8; /* 半透明效果，数值0-1可调 */
  margin-right: 30px; /* 与右侧信息块的间距 */
}

.product-info {
  /* 占满剩余宽度 */
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px; /* 内部元素间距，可按需调整 */
}

.product-price {
  font-size: 24px;
  color: #ff4444;
  font-weight: 700;
}

.product-details h3 {
  font-size: 20px;
  margin: 0 0 10px;
}

.product-details p {
  color: #666666;
  line-height: 1.6;
  margin: 0 0 20px;
}

.product-details button {
  padding: 10px 22px;
  background-color: #ff4444;
  color: #ffffff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

关键说明 #

• 弃用absolute定位：该定位会让元素脱离文档流，导致父容器高度塌陷，还需额外处理位置偏移，Flexbox是更适配这类常规布局的方案。
• 半透明实现：直接通过opacity属性设置，不会影响元素的布局空间。
• 文档流保持：Flex布局下的所有元素均处于文档流内，section会自然排列在header下方，父容器会自动包裹子元素高度。
• 匹配参考效果：可根据参考图调整.product-section的内边距、.main-product-image的宽度比例、.product-info内的元素样式及间距。

内容的提问来源于stack exchange，提问作者Рома Можаренко