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

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

*

「position:absolute」の親要素に「relative」は世代を超えて設定可能【Webデザイン・CSS】

   

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

CSSを使ったWebデザインで非常によく使うのが「position:absolute」。
絶対位置指定のこのプロパティを使えばぶっちゃけどんなデザインでも可能になってきます。

ただ、親要素に「position:relative」と指定してあげないと、ウインドウ内での絶対位置になってしまうため。ウインドウサイズが変わるとレイアウトが崩れてしまう可能性があるんですね。

これに関しての詳細は以下の記事で解説していますので参考にしてください。
「position:absolute」を子要素に使いたいときは親要素に「position:relative」【CSS】 | ちほちゅう

で、「position:relative」を書いてあげる親要素ですが今までは1世代上、直接の親でないとダメだと思っていたのですが、
そうでなくても設定可能だということが分かりました。

HTMLイメージ

スポンサーリンク
 

どういうことかというと。
以下の図を見てください。

絶対位置指定の親子関係

四角になっているのはブロックレベル要素だと思ってください。
(厳密に言うとHTML5から「ブロックレベル要素」という言い方はなくなったみたいですが考え方としては生きているようですのでそのまま使います)

グレーのブロックレベル要素を絶対位置指定にしたい場合、一般的には1世代上、❶のブロックレベル要素に「position:relative」と書くことでウインドウサイズが変わっても位置のずれない絶対位置指定をすることができるわけです。

が、ブログのテンプレートなどによくあるのですが、❶の上にあるブロックレベル要素の高さ可変だった場合。
かつ、絶対位置指定の基準が❷のブロックレベル要素だった場合。
(たとえば、グレーの部分がヘッダー上のパーツだったりした場合)

この場合、❶のブロックレベル要素に「position:relative」と書いてしまうと、その上のブロックレベル要素の高さが変わってくるとレイアウトが崩れてしまう可能性があるんです。

そんなときは、❶のブロックレベル要素には何も記述せず、❷のブロックレベル要素に「position:relative」と書くこで実装可能だったことに気づきました。
つまり、1世代上、直接の親要素でなくても、「position:relative」を書いたブロックレベル要素を基準とした絶対位置指定になるということです。

分かりますか?

先ほど言ったように、ブログのテンプレートデザインなんかだと、結構、これ、使えるんじゃないかんなぁと思い、忘れないうちに記事にした次第。

ただ、そもそも、HTMLの構造をしっかり考えておけばこんなことはしなくても済むといえばそうなのですが、CMSやAPI全盛期の昨今、自分が思ったような構造でHTMLをかけないこともしばしば。
だもんですから、きっと、これ覚えておけばいずれ使う機会が来るんじゃないかなぁと思います。

なお、世代間のブロックレベル要素にはpositionの指定をしないというのも必須となりますので、その辺りも注意してあげてください。

なんか、久しぶりに技術系の記事書いた気がする。。
そーいえば、Webデザイナーの講師やめて1年近くなるし、そろそろそういった記事も書いていこうかなぁ。。

 - CSS/HTML, Webデザイン , , , , , ,

アドセンス広告メイン

Message

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

  関連記事

no image
リンクファーム(検索ディレクトリ)の威力

以前、ここでリンクファームらしきサイトを紹介しましたが、 ページランクが当時たし …

no image
エントリーって何?

3月26日のエントリー「ブログ各記事(エントリー)のタイトルって大切」始め、 最 …

no image
アップローダーが減ったわけ

かなり古いネタですが、興味深いネタなので今更扱ってみようと思います。

no image
インターネットは儲からない

しあわせのくつ – インターネットビジネスが儲からない理由 という記 …

自分のサイト表示がブラウザごとに確認(チェック)できるサイト「browserling」

Web制作する際に困るのが表示確認です。 最近は、W3Cの勧告している仕様に沿っ …

Googleの検索機能、モバイル(スマホ)版とPC(パソコン)版が完全に分離されるとの情報。SEOは各々行う必要が

どこからでた情報なのかわかりませんが、Googleがモバイル(スマホ)版とPC版 …

レストランで料理の写真を撮ってブログにアップすると違法?

などというドキッとするようなタイトルの記事を発見。結論はどっち? □  …

意外と知らないネットスラング「スルー力」とは

先日、何かの折に「リアルでもスルー力って必要だよね」という話をしたら周りのみんな …

no image
プレゼン結果

以前こちらで報告したプレゼンの結果ですが、 結論からいうと、ダメでした。 しかし …

no image
世の中は進化してます

デザインからシステム・マーケティング系の仕事をやるようになって、 いろいろ勉強さ …