position:absolute设置right负值会使父元素的宽度增加?

Question

如下图所示，活动规则的按钮，设置了right负值之后，页面出现了横向的滚动条，只是想让按钮的一部分超出页面，这样实现不了，想知道为什么会出现滚动条？

.btn-rule{
    display: inline-block;
    width: 1.9467rem;
    height: 0.6133rem;
    line-height: 0.6133rem;
    padding-left:0.2667rem;
    border-radius: 0.5333rem;
    -webkit-border-radius: 0.5333rem;
    background-color:#ffb840;
    top: 0.3067rem;
    right: -0.2667rem;
    position: absolute;
    font-size: 0.32rem;
    color:#fff;
    letter-spacing: 0.0133rem;
}

Answer 1

没有写overflow:hidden默认溢出就是显示的。 你right负值会增加可视区域宽度，所以滚动条就出来了