如何仅移动HTML容器内的img而不移动外层灰色容器

之前给.front-person-img类添加left:-500px样式时，选中的是外层灰色菱形容器本身，自然会带动容器、内部图片整体位移。且父容器设置了overflow:hidden，直接给相对定位的内部图片加大偏移值容易出现显示裁切问题。

全程不修改.front-person-img父容器的任何原有样式，保证灰色容器、其余页面元素位置完全不变，仅调整内部图片的CSS属性即可：

• 将内部图片的定位从relative改为absolute，基于父容器做独立偏移，不影响其他元素布局
• 调整图片的left属性值控制左移距离，不要改动父容器的margin、position、transform属性
• 微调偏移数值直到人物显示位置符合预期，若出现边缘裁切就适当增大left数值

修改后的完整可用CSS代码如下：

/* 外层灰色容器样式保持原样，不做任何修改 */
.front-person-img{
    width:500px;
    height:500px;
    overflow:hidden;
    background:#F0F0F0;
    position:relative;
    z-index:15;
    -webkit-transition:height .5s .3s ease, transform .5s .8s ease;
    -moz-transition:height .5s .3s ease, transform .5s .8s ease;
    transition:height .5s .3s ease, transform .5s .8s ease;
    margin:200px auto;
    margin-bottom:0;
    -webkit-transform:rotate(45deg);
    -moz-transform:rotate(45deg);
    -ms-transform:rotate(45deg);
    -o-transform:rotate(45deg);
    transform:rotate(45deg);
    border-radius:0;
}

/* 仅修改内部img的样式规则 */
.front-person-img > img{
    max-width:100%;
    position: absolute;
    /* 调整left数值即可控制左移幅度，数值越小图片越靠左，可按需微调 */
    left: -180px;
    top: 40px;
    vertical-align: bottom;
    -webkit-transform:rotate(-45deg) translateY(40px);
    -moz-transform:rotate(-45deg) translateY(40px);
    -ms-transform:rotate(-45deg) translateY(40px);
    -o-transform:rotate(-45deg) translateY(40px);
    transform:rotate(-45deg) translateY(40px);
}

调参提示：初始给的-180px是参考值，可根据实际图片显示效果左右调整数值，全程不要修改父容器属性。

原有HTML结构不需要做任何改动，保持原有写法即可实现需求。

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