当设置父元素overflow: hidden；子元素超出父元素时没有隐藏

 

<div class="box">
    <img src="http://img1.imgtn.bdimg.com/it/u=2335896061,645089826&fm=214&gp=0.jpg" alt="">
</div>

当我将img标签设置为 position:absolute;

 

设置父元素

.box{
    width: 400px;
    height: 200px;
    border:1px red solid;
    overflow: hidden;
}
 .box>img{
     width: 100%;
     height: auto;
     position: absolute;
     left: -1px;
     top: 10px;
 }

结果发现父元素的overflow:hidden;居然没有作用了，经过反复试验，原来只需要在父元素的样式中加上

position: relative;

就可以了。