Bootstrap网页中absolute定位图片超出父div容器问题咨询

• 绝对定位元素的默认渲染规则：你给.img-trans设置了position: absolute，绝对定位元素脱离了常规文档流，父容器.section虽然设置了position: relative作为定位参照，但默认的overflow: visible属性不会裁剪超出边界的内容，所以图片超出部分会直接显示在父容器外。
• 负外边距的拖拽偏移：你给img标签添加了行内样式margin-top: -150px，这个规则会把图片整体向上偏移150px，直接超出了父容器的顶部边界。
• 图片尺寸未做适配限制：你没有给图片设置宽高限制规则，也没有添加Bootstrap自带的img-fluid类实现响应式适配，如果你的svg图片自身宽度大于父容器.col的宽度，就会出现水平方向的溢出；如果图片自身高度大于父容器高度减去偏移量的数值，也会进一步加剧垂直方向的溢出。

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