「position:absolute」を子要素に使いたいときは親要素に「position:relative」【CSS】
1年以上前の記事です。内容が古い可能性があります。
CSSには「position(ポジション)」というプロパティがあって、これを使って「position:absolute」と指定すると、
画面上の好きな場所にそのブロック要素を配置することができます。
ただし、自由に動かせすぎるだけに、注意しないとこういったことになりかねません。
まずはこちらをご覧ください。

実はこれ、全く同じHTML及びCSSでできているレイアウトです。
「あいうえお」は「margin:auto」でセンタリングに、「かきくけこ」は「position:absolute」で自由な位置に配置しています。
違うのはウインドウのサイズだけで、ウインドウのサイズが変わるとレイアウトが変わってしまうのです。
具体的なソースは以下のようになっています。
□ HTML
<div id=”naka”> かきくけこ</div>
</div>
□ CSS
width: 800px;
height: 800px;
background-color: #FF9;
margin: auto;
}
#naka {
width: 100px;
height: 100px;
background-color: #FCF;
position: absolute;
top: 200px;
left: 50px;
}
見てお分かりのように、「soto(あいうえお)」内に「naka(かきくけこ)」があるので通常は「soto」が動けば「naka」もそれにそって動かないといけないのですが、「naka」に「position:absolute」と書いてしまったがために、ウインドウを基準にした自由な位置に「naka」が配置されてしまっているのです。
さて、この場合はどうやって問題を解決したらいいのでしょうか?
ヒントは以前説明した「floatで高さ0になった親要素の高さを復活させる方法」です。
この時は親要素にも同じように「float:left」と書くことで解決しています。
今回の「position:absolute」も一緒です。
親要素(この場合「soto」)に対してpositionの設定をしてあげればOK。
ただし、今回は子要素と同じ「position:absolute」にしてはいけません。
「margin:auto」によるセンタリングを活かすには「position:relative」を書きます。
□ CSS
width: 800px;
height: 800px;
background-color: #FF9;
margin: auto;
position:relative;
}
#naka {
width: 100px;
height: 100px;
background-color: #FCF;
position: absolute;
top: 200px;
left: 50px;
}
この書き方をすれば、仮に親要素(ここではsoto)を「float:right」にしてもそれこそ、「position:absolute」で絶対配置をしてもしっかり子要素(ここではnaka)が付いて回ります。
親要素に「position:absolute」を設定する場合は当然ながら「position:relative」は残す必要はありません。
といったところでまとめると
しっかり覚えておきましょう。
ちなみに、過去に「センタリングさせるデザインで「absolute」が使えない」という記事を書いていますが視点が違うので再度あつかってみました。
アドセンス広告メイン
関連記事
-
-
定額見放題の映像オンデマンド配信サービス「Hulu(フールー)」。日テレ(日本テレビ)が買収
1年以上前の記事です。内容が古い可能性があります。みなさん、Hulu(フールー) …
-
-
Googleのロゴがゴシック系に変更。Futuraに似すぎ、パクリ疑惑で撤回か?
1年以上前の記事です。内容が古い可能性があります。って話になりかねんですなこの国 …
-
-
Flash(フラッシュ)でGifアニメを作るときの注意点
1年以上前の記事です。内容が古い可能性があります。先日、とあるサイトでGifアニ …
-
-
デザインの配色に迷ったときに使えるツール
1年以上前の記事です。内容が古い可能性があります。デザイン系ブログとしてよく読ま …
-
-
インターネットを一切使わずにブログを書いてみる
1年以上前の記事です。内容が古い可能性があります。エイサーASPIRE ONEを …
-
-
ノラ電波を勝手に使ったら何かの罪に問われるの?
1年以上前の記事です。内容が古い可能性があります。ノラ電波とはセキュリティ対策の …
-
-
Yahoo!ボックス(Web版)は複数ファイルの一括ダウンロードができない
1年以上前の記事です。内容が古い可能性があります。アプリを使えばできるのでいいの …
-
-
ホームページ作成手順
1年以上前の記事です。内容が古い可能性があります。みなさんは、どういった流れでホ …
-
-
ホームページビルダーでサイト内一括置換
1年以上前の記事です。内容が古い可能性があります。普段ドリームウィーバー(Dre …
-
-
9月のヒットキーワード及びヒットページ
1年以上前の記事です。内容が古い可能性があります。さて、9月のヒットキーワード及 …