inline-block的绝对定位子元素-问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文

inline-block的绝对定位子元素

a123456678 2016-05-27 16:15:45 1267

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

前端开发 JavaScript
分享到
取消 提交回答
全部回答(1)
  • 走丁大兄弟
    2019-07-17 19:18:13

    position:absolute的定位是依据最近的一个position:relative元素而定位的。

    0 0
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

推荐文章
相似问题
推荐课程