关于绝对定位，并随滚动条移动的问题

[yxxue]

想实现的效果是，一个跟随父容器的span，使用position:absolute或fixed后，当父容器随着页面滚动条移动时，该span随父容器一起移动。
父容器未使用定位。

<div style="height:500px;width:270px;overflow:scroll;" id="AAA">

<p style="margin:10px;height:20px;">
<span style="position:fixed;width:100px;height:30px;margin-top:-5px;background-image:url(1.png);"></span>
</p>

<p style="margin:10px;height:20px;">
<span style="position:fixed;width:100px;height:30px;margin-top:-5px;background-image:url(1.png);"></span>
</p>

</div>

因为有一个100*30的背景图，想放在p里面，但是p的高度只有20，所以想了这个办法。
实际上当AAA里的P多了出滚动条后，拖动滚动条时，SPAN不动。

请问大神们如何解？

[潇湘忆梦]

这样是不是就可以了

div style="height:1200px;width:270px;overflow:scroll;" id="AAA">
        <p style="display:flex;margin:10px;height:20px;">
            <span style="width:100px;height:30px;margin-top:-5px;background-image:url(image/milestone-box.png);"></span>
        </p>
    </div>

[潇湘忆梦]

看你的描述只有两点，也不知道我有没有理解错 1. p的高度不够但是又想放一个大的背景图 2. 子控件没有跟着父容器一起移动

[天际的海浪]

父容器设置position: relative; span使用position:absolute;就是相对于父容器定位了，会随父容器一起移动。

[aiweiya520]

如果我没理解错你说的意思，span用absolute应该就可以了。

[yxxue]

引用 3 楼 潇湘忆梦 的回复:

看你的描述只有两点，也不知道我有没有理解错 1. p的高度不够但是又想放一个大的背景图 2. 子控件没有跟着父容器一起移动

确实如此，就是这个问题。

[yxxue]

引用 2 楼 潇湘忆梦 的回复:

这样是不是就可以了

div style="height:1200px;width:270px;overflow:scroll;" id="AAA">
        <p style="display:flex;margin:10px;height:20px;">
            <span style="width:100px;height:30px;margin-top:-5px;background-image:url(image/milestone-box.png);"></span>
        </p>
    </div>

不行，SPAN会把P撑开。就是想在20PX的容器内，放一个30PX的背景，允许背景图显示在容器外。 用position:absolute就解决了，但是不会随着父容器移动

[yxxue]

引用 6 楼 yxxue 的回复:

[quote=引用 2 楼 潇湘忆梦 的回复:] 这样是不是就可以了

div style="height:1200px;width:270px;overflow:scroll;" id="AAA">
        <p style="display:flex;margin:10px;height:20px;">
            <span style="width:100px;height:30px;margin-top:-5px;background-image:url(image/milestone-box.png);"></span>
        </p>
    </div>

不行，SPAN会把P撑开。就是想在20PX的容器内，放一个30PX的背景，允许背景图显示在容器外。 用position:absolute就解决了，但是不会随着父容器移动[/quote] 父级用display:flex，会把span的背景图截掉，超出高度的显示不出来