元素相对于页面宽度的绝对位置

Question

我不知道我是否正确地写了标题，但这是我的问题...... 我有DIV（position:relative），里面只有几个SPAN（position:absolute）。 SPAN相对于DIV定位为left:40%; top:20%。它工作正常。 我想为DIV添加宽度 - width:200%。我认为SPAN应该与left:40%; top:20%相对应，而DIV现在已经达到了200％（两倍大）。现在我有问题了。 SPAN保持在以前的位置。看起来DIV是200％，但SPAN位于窗口宽度的left:20%; top:10%。这是正确的行为吗？它看起来绝对不是窗口大小而是窗口的可见区域。 希望你理解我的帖子。

<div>
    <span style="top:40%; left:20%">Value 1</span>
    <span style="top:15%; left:15%">Value 2</span>
    <img src="img/background.jpg">
</div>
<style>
    div {width:100%; position:relative;}
    div span {display:inline-block; position:absolute;}
    img {max-width:100%}
</style>