开发者社区> 问答> 正文

inline-block的绝对定位子元素

<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的锅?

展开
收起
杨冬芳 2016-06-01 15:56:48 1842 0
1 条回答
写回答
取消 提交回答
  • <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的锅?

    2019-07-17 19:23:27
    赞同 展开评论 打赏
问答分类:
问答地址:
相关产品:
问答排行榜
最热
最新

相关电子书

更多
低代码开发师(初级)实战教程 立即下载
冬季实战营第三期:MySQL数据库进阶实战 立即下载
阿里巴巴DevOps 最佳实践手册 立即下载