てんぽ: 絶対配置要素の位置の基準

CSSやHTML、FC2ブログのカスタマイズ、共有テンプレートなど

スポンサーサイト

--年--月--日(--)

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
#
カテゴリ:スポンサー広告

絶対配置要素の位置の基準

2007年02月05日(月)

『ザ・ルールズ・オブ・スタイルシート』PDF資料18,19ページのposition:absoluteに関する説明で、絶対配置要素の位置の基準について以下のように書かれているのですが、 これはあまり正確ではない。

position: absolute
  • 包含ブロック(左上)からの移動距離
  • ただし、ブラウザ実装はbodyからの移動距離

包含ブロック(左上)からの移動距離というのは正しいのですが、 ただし、ブラウザ実装は~という表現から包含ブロックについて誤解があることを読み取れます。

包含ブロックとは単に親要素のことを指すのではありません。CSSの仕様で細かく場合分けして定義された用語で、 絶対配置要素の包含ブロックは「祖先要素のうち最も近い、positionの値がstaticでない要素のパディング辺。該当するボックスがなければ、初期包含ブロック」です。

PDF資料の例では、position: absoluteが指定されたp要素の包含ブロックは、親要素のdiv#contentではなく、初期包含ブロックになります(div#contentのpositionの値はとくに明示されていないので初期値のstaticであると見なす)。 なのでブラウザ実装はbodyからの移動距離というのは仕様的にも正しい(正確には初期包含ブロックがbodyに見えるというだけですが)。

つまり、このような書き方では、「仕様的にはpはdiv#contentを位置の基準にするべきだが、ブラウザ実装はbodyを基準にしてしまっている」と読めるので、 この2項目をただしでつなぐのは不適当というわけです。

p要素の位置の基準をdiv#content(が形成する包含ブロック)にするには、div#contentにposition: relative等を指定する必要があります。

Web標準の教科書は益子 貴寛氏の著作であり、 やはり同様の誤解が見られましたが、『Web標準の教科書』が良書であることに変わりはないと思います(改定版に期待します)。

#126
カテゴリ:HTML・CSS
タグ[ CSS ]

同じカテゴリの記事

(-1件)

益子貴寛:Re: 絶対配置要素の位置の基準

ご指摘ありがとうございます。
今後のセミナーや書籍の改訂版(もし出るならば)で、
きちんと話させて/書かせていただきますね。

  • 2007年02月06日(火)10:15:30
  • URL
  • 編集
コメントの投稿

トラックバック(-0件)

http://mb.blog7.fc2.com/tb.php/126-f88bd7c8

<<最小フォントサイズが効かない | アップロードしたファイルのURLが変わっている>>

Utilities

おすすめ

セオリー・オブ・スタイルシート (Quick Master of Web Technique)
「ボックスと視覚整形モデル」の詳細な解説が圧巻。→関連記事
Web標準の教科書―XHTMLとCSSでつくる“正しい”Webサイト
正しい仕様の解説から実践的なレイアウトテクニックまで網羅。→関連記事
詳解HTML&XHTML&CSS辞典 第3版
信頼できる辞典型解説書の筆頭。

広告

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。