为什么overflow-y:scroll 会影响我的元素定位

Question

为什么overflow-y:scroll 会影响我的元素定位

html:

<div class="test">
    <p class="aa">11110 <span>xxxxxx</span> </p>
    <p class="aa">11110 <span>xxxxxx</span> </p>
    <p class="aa">11110 <span>xxxxxx</span> </p>
    <p class="aa">11110 <span>xxxxxx</span> </p>
    <p class="aa">11110 <span>xxxxxx</span> </p>
    <p class="aa">11110 <span>xxxxxx</span> </p>
</div>

css:
    .aa{
        position: relative;
    }
    .aa span{
        position: absolute;
        top: -13px;
        left:-68px;
        display: inline-block;
        background-color: aqua;
        color: antiquewhite;
    }
    p.aa{height: 40px;background: red;}
    .test{max-height:150px;overflow-y: scroll;margin-top: 40px;}

如果不给.test 滚动条是正常的，定位正确：

但是，一旦加了滚动条就变成这样：

所有的 <span></span> 都不显示了
这是为什么呀？可以帮忙看一下吗？

Answer 1

<span> 的css设置left:-68px;已经出屏幕之外了，改一下就可以见到了