新・元地方の中規模印刷会社で苦悩するWebデザイナー改めWebディレクターの日記

自由な20代、窮屈な30代を経て、遂に40代になっちまったWebディレクター&パソコン講師の覚書と思う言(こと)。略称【ちほちゅう】

*

「position:absolute」を子要素に使いたいときは親要素に「position:relative」【CSS】

   

  • このエントリーをはてなブックマークに追加

1年以上前の記事です。内容が古い可能性があります。

CSSには「position(ポジション)」というプロパティがあって、これを使って「position:absolute」と指定すると、
画面上の好きな場所にそのブロック要素を配置することができます。
ただし、自由に動かせすぎるだけに、注意しないとこういったことになりかねません。

スポンサーリンク
 

まずはこちらをご覧ください。
absolute01

次にこちら。
absolute02

実はこれ、全く同じHTML及びCSSでできているレイアウトです。
「あいうえお」は「margin:auto」でセンタリングに、「かきくけこ」は「position:absolute」で自由な位置に配置しています。
違うのはウインドウのサイズだけで、ウインドウのサイズが変わるとレイアウトが変わってしまうのです。

具体的なソースは以下のようになっています。

□ HTML

<div id=”soto”> あいうえお
  <div id=”naka”> かきくけこ</div>
</div>

□ CSS

#soto {
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

#soto {
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」は残す必要はありません。

といったところでまとめると

子要素に「position:absolute」を使う場合は親要素に「position:relative」を入れてあげる。

しっかり覚えておきましょう。 

ちなみに、過去に「センタリングさせるデザインで「absolute」が使えない」という記事を書いていますが視点が違うので再度あつかってみました。

 - Webデザイン, デザイン

アドセンス広告メイン

Message

メールアドレスが公開されることはありません。

  関連記事

no image
Flashな日々

1年以上前の記事です。内容が古い可能性があります。今日はFlash漬けです。 ア …

no image
プレゼン結果

1年以上前の記事です。内容が古い可能性があります。たまたま営業と先方の担当が仲良 …

no image
年末

1年以上前の記事です。内容が古い可能性があります。年末が近くなり忙しくなりつつあ …

「mixiボイス」と「twitter」は別物

1年以上前の記事です。内容が古い可能性があります。twitterのつぶやきをmi …

ツイッター(Twitter)がデザインリニューアルでFacebook化。まだ未反映

1年以上前の記事です。内容が古い可能性があります。ツイッター(Twitter)W …

no image
僕がデザイナーを辞めた理由

1年以上前の記事です。内容が古い可能性があります。休みに入ったけど、カレンダーが …

no image
これから

1年以上前の記事です。内容が古い可能性があります。これからのネット社会はどうなっ …

知らん間に「HTML5」がW3Cから正式に勧告されていた

1年以上前の記事です。内容が古い可能性があります。Web関連の仕事をしている身で …

「アドセンス(Adsense)」緑→青→緑の軌跡

1年以上前の記事です。内容が古い可能性があります。こちらの記事でやると言っていた …

no image
社長が騒ぎ立てている

1年以上前の記事です。内容が古い可能性があります。お金になることが分かると目の色 …

血液型オヤジ