如何在CSS中定位元素？图片溢出div、位移反向如何修复

• 绝对定位基准错误：你为.title-img设置了position: absolute，但它的直接父元素.col-lg-6没有设置position: relative，导致图片的定位基准是整个页面根元素，而非所在的列容器，这就是调整位置时偏移方向和预期相反的核心原因。
• 旋转带来的边界溢出：transform: rotate(25deg)默认以元素中心为旋转基点，旋转后元素的视觉边界会超出原本的矩形盒范围，自然会出现溢出容器的问题。
• 缺少定位范围约束：没有给图片设置明确的位置偏移规则，也没有对父容器的定位范围做约束，图片默认会停在文档流原本的渲染位置，旋转后就会超出列容器的可视范围。

只需修改CSS部分代码即可，修改后的完整CSS如下：

#title {
  background-color: #916BBF;
  /* 新增：小屏幕下防止内容高度无限溢出，不需要可删除 */
  overflow: hidden;
}

.container-fluid {
  padding: 3% 15%;
}

/* Download Buttons */
.download-button {
  margin: 5% 3% 5% 0;
}

/* 新增：给图片父容器设置相对定位，作为绝对定位的基准 */
.col-lg-6 {
  position: relative;
}

/* Title */
.title-img {
  width: 60%;
  transform: rotate(25deg);
  position: absolute;
  /* 新增：调整图片在父容器内的位置，靠右排布，数值可按需调整 */
  right: 10%;
  /* 可选：需要图片露出到features区域上方就设为2，默认在下方就设为0 */
  z-index: 0;
}

#features {
  padding: 7% 15%;
  background-color: #fff;
  position: relative;
  z-index: 1;
}

.feature-box {
  text-align: center;
  padding: 5%;
}

修改说明：

• 给图片的父容器.col-lg-6添加position: relative后，图片的所有定位偏移都会以这个列容器为基准，调整right/left属性时方向就会符合预期，设置right: 10%就会让图片距离列容器右边缘10%的位置，自然靠右排布。
• 给#title添加overflow: hidden可以控制小屏幕下图片不会无限溢出标题区域的高度，如果要实现手机部分露出到features区域上方的效果，删除这行同时调整.title-img的z-index为2即可。

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