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;
}