はじめに
株式会社イメージ・マジックの技術ブログ、今週の担当のsoenoです。今回は要素の表示位置（positionプロパティ）について書こうと思います。
【問題】position: absoluteの要素が期待した位置に出ないとき
CSSレイアウトでposition: absoluteを使っていて、「思った位置に表示されない」と困ったことはありませんか？その原因は、親要素にpositionの指定がないからかもしれません。
【仕組み】absoluteの「基準」はどこ？
CSSでは position: absolute を使うと、要素は「最も近いpositionがstatic以外で指定された親要素（relative・absolute・fixed・sticky のどれか）」を基準にして配置されます。位置を直したい要素の親要素をたどって、positionがstatic以外に指定されているものを探してみてください。
static指定の場合は基準位置にならないので見送ってください。
見つかった要素が位置の指定の基準です。
最も近いpositionがstatic以外の親要素が見つからない場合は、初期コンテナ（通常はhtml のビューポート）を基準に配置されます。
【実例】ツールチップの位置を直してみる
下のイメージはtooltipWrap要素にposition: relative;を指定した場合と、しない場合の表示の違いです。
tooltipWrap要素を基準とすることで、ツールチップの位置がtooltipWrap内に収まるようになります。基準としたい親要素にposition:relative;指定を追加することで子の位置の基準が明確になります。
後はその親に対してどんな位置に表示するかを設定します。
実際のコードは以下の通りです。色々変えてみたい場合にご利用ください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>position: relative のデモ</title>
<style>
.outer {
width: 300px;
height: 200px;
border: solid thin #cccccc;
background: #ebebeb;
margin: 50px auto;
padding: 20px;
}
.tooltipWrap {
width: 150px;
height: 100px;
border: solid thin #b6eeb6;
background: #dfffdf;
/* この指定がないと基準が初期コンテナになる。 */
position: relative;
}
.tooltip {
position: absolute;
top: 0;
right: 0;
background: #0fe481d2;
padding: 5px;
font-size: 12px;
}
</style>
</head>
<body>
<div class="outer">
<div class="tooltipWrap">
tooltipWrap
<div class="tooltip">tooltip</div>
</div>
</div>
</body>
</html>
【補足】Chromeの開発者ツールを使って確認する
ディベロッパーツールを使うことで実際のページのスタイルを少し変更してみることができます。Chromeは下記の手順で確認できます。- 調べたい要素を右クリック。
- 出てきたメニューから検証を選択。
- ディベロッパーツールが要素を指定した状態で開きます。
（選択中の要素はelements内をクリックするなどで変更可能。） - 右のエリアのstyleの項目に表示されているのがその要素についているCSSです。
- プロパティにカーソルを充てるとチェックボックスが表示され、チェックボックスのオンオフで既存のスタイルの着脱ができます。（保存はされません）