「absolute」と「overflow:hidden;」を組み合わせて使う場合には、親要素に必ず「position:relative;」を指定しなければいけない

概要

・より正確には、下記の通り
「absolute」と「overflow:hidden;」を組み合わせて使う場合には、親要素に必ず「position:static;」以外を指定しなければいけない

---

absolute基準位置

absoluteした時の基準位置は、親要素のpositionプロパティが「static」か「それ以外」で、大きく異なる

親要素のpositionプロパティ	基準位置
static以外の値を指定	親要素の左上が基準位置
staticを指定	ウィンドウ全体の左上が基準位置

※static以外 … absolute、fixed、relativeの何れか

---

overflow:hidden;

「absolute」で「overflow:hidden;」が効かない理由
・親要素のpositionプロパティに何も指定していない、もしくは「static」を指定しているため、overflowの基準位置が「ウィンドウ全体の左上」となっていることが原因

対応
・親要素に、「static」以外のpositionプロパティを指定すれば良い


遭遇例はこちら