HTML CSS问题：gallery相册图片为何上下堆叠，修改position后重叠？

问题原因 #

你调整position属性后图片重叠，本质是因为如果给子图片设置了position: absolute，元素会脱离正常文档流，不再占据原有排版空间，自然会全部堆叠在同一个位置，而你当前的父容器.gallery已经设置了position: relative，刚好作为绝对定位子元素的定位参照，就会出现重叠的情况。

解决方案 #

如果想要实现多图排版的相册效果，可以不用修改position属性，选择更稳妥的布局方案即可：

• 方案1：Flex布局（最推荐，兼容性好、易维护）
  给.gallery新增flex相关属性即可，修改后的完整代码如下：

  .gallery {
    background-color: #000000;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
    color: #ffffff;
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 16px;
    line-height: 1.6em;
    margin: 10px;
    max-width: 310px;
    min-width: 250px;
    overflow: hidden;
    position: relative;
    text-align: left;
    width: 100%;
    /* 新增flex相关属性 */
    display: flex;
    gap: 10px; /* 自定义图片之间的间距 */
    overflow-x: auto; /* 超出容器宽度可横向滚动 */
  }
  /* 可选：给子图片设置固定规则避免被压缩 */
  .gallery img {
    width: 100%;
    flex-shrink: 0;
  }
  

• 方案2：Grid布局
  如果需要多行多列的网格相册效果，给.gallery新增Grid属性即可：

  .gallery {
    /* 原有属性保留，新增以下内容 */
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); /* 自动适配列数，每列最小宽度100px可自定义 */
    gap: 10px;
  }
  

• 方案3：float布局（仅做兼容老旧浏览器备选）
  给子元素设置浮动即可：

  /* 子图片设置浮动 */
  .gallery img {
    float: left;
    width: 33.33%; /* 一行放3张的宽度设置，可自定义 */
  }
  /* 父容器清除浮动避免高度塌陷 */
  .gallery::after {
    content: "";
    display: block;
    clear: both;
  }
  

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