inline-block的绝对定位子元素

Question

html代码如下：

<a href="javascript:;" class="ctrl-i">
            <img src="img/14.jpg" alt="">
</a>
css代码如下：
 .ctrl-i{
    display: inline-block;
    width: 150px;
    height: 13px;
    background-color: #666;
    box-shadow: 0 1px 1px rgba(0,0,0,0.3);
    /*position: relative;*/
}
.ctrl-i img{
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 50px;
    z-index: 1;
    -webkit-box-reflect:below 0px -webkit-gradient(
        linear,
        left top,
        left bottom,
        from(transparent),
        color-stop(50%,transparent),
        to(rgba(255,255,255,0.3))
        );
}

去掉a标签的relative，图片宽度就不会变成150px，而是原本宽度，加上relative就没有问题。绝对定位脱离文档流我知道但连继承父元素宽度都不行么？还是inline-block的锅？

Answer 1

因为指定的宽度值（百分比）是相对于其包含块的，因为你的img绝对定位了，所以其包含块就是第一个position不是static的祖先元素

详见 http://blog.aijc.net/css/2014/08/08/CSS%20%E5%8F%AF%E8%A7%86%E5%8C%96%...

Answer 2

应该是.ctrl-i img中的position: absolute惹的祸

Answer 3

absolute 后的元素的父亲应该是 body 吧