positionとoverflow hiddenを併用する際の注意点

cssの positionとoverflow:hiddenを併用する場合。
上手く、overflow:hiddenが効かない時がある。

以下のような指定だと起こる

<div style="overflow: hidden; width: 400px; height: 300px;">
   <div style="position: absolute;top: 0px;left: 500px;">
       <img src="sample.jpg">
   </div>
</div>

親要素にサイズ指定、overflow:hidden;をしても小要素のposition:absoluteが邪魔するらしく、overflow:hidden;が効かなくなる。

なので親にposition:relativeを付けてあげれば正常に動く。

<div style="position: relative; overflow: hidden; width: 400px; height: 300px;">
   <div style="position: absolute;top: 0px;left: 500px;">
       <img src="sample.jpg">
   </div>
</div>

こういった形でも可

<div style="overflow: hidden; width: 400px; height: 300px;position: absolute;top: 0px;left: 500px;">
   <img src="sample.jpg">
</div>

overflow:hiddenとpositionはセットで記述しないとうまく動かないよう。
自分の環境だとchrome,safariで確認しました。