跨度與位置：絕對不會在容器溢出時創建滾動條

Question

我想要容器內絕對定位的SPAN在容器溢出容器時在容器上顯示滾動條。

但是，即使在容器上有overflow：auto，SPAN也會在容器div外面飛行，就好像它不屬於容器一樣。

我會追加很多SPAN，所以其他的位置值（如相對值）會混淆每個SPAN所需的獨立定位，儘管會製作滾動條。

這裏是小提琴： https://jsfiddle.net/v8x2bot4/1/

CSS：

.container { 
    background-color: #AFF; 
    width: 500px; 
    height: 500px; 
    overflow: auto; 
} 

.fly { 
    border: solid black 1px; 
    background-color: #0F0; 
    position: absolute; 
} 

HTML：

<div class="container"> 
    <span class="fly" style="left:450px; top:100px">blablablablabla</span> 
    <span class="fly" style="left:300px; top:200px">blablabla2</span> 
</div> 

我怎樣可以隱藏SPAN四溢的一部分，使滾動條顯示爲需要？

希望HTML + CSS可以不使用JavaScript。但是，不管SPAN的數量如何，使用JavaScript的解決方案都應該很容易維護和適用。

Answer 1

添加position: relative到.container

https://jsfiddle.net/xfmrtx3s/