position:absolute は位置指定をしていないと親要素の影響で思わぬ動きをするときがある、という話 - わたしと納豆ごはん【追記 (2017/04/08)：Flexbox（フレキシブルボックスレイアウト）のことなど、記事の一部を変更しました。】 HTMLをCSSでデザインするときに、要素を重ねることがありますよね。 例えばdivやspan要素、疑似要素:beforeや:afterを重ねて一つのデザインを作る、なんてことはよく使われる方法です。 そのときよく使われるCSSがpositionプロパティです。 このプロパティなのですが、親要素と子要素の表示形式やプロパティによって、いろいろややこしかったのです。 スポンサーリンク 親要素の影響を受けるインラインレベルの position:absolute 原因の推測 IE11 では他とは違い基準位置に インラインレベルで位置が変わることへの対応策 1、ブロックレベルにする 2、leftプロパティを指定する vertical-align や Flexbox はブロック
