CSS只设置定位而不设置top、left等属性会怎样

问题


  前段时间做H5时发现有个定位问题怎么都搞不好,后来捣鼓了好久,之后发现当在出问题的那个盒子设置了left属性之后解决了这个定位问题,当时一时间没反应过来,也因为比较赶就没有细想,今天才突然回想起这个问题。

改前的代码:

.info-box {
  position: absolute;
    top: -40px;
    ...
}

改之后的代码:

.info-box {
  position: absolute;
    top: -40px;
    left: 0;
    ...
}

结论


  当只给元素定义了position:absolute时,如果top, bottom, left, right都没有指定时,则left,top值与原文档流位置一致(当然了它是不占位的)。
  所以我上面只给info-box设置了top属性而未设置left属性就造成了它在水平方向上仍然保持原有位置,而这个位置绝对不是left:0。实际上不论是何种定位,规则都如上所述。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值