css:positionの挙動について

質問

いつもお世話になっております。

positionの挙動で詰まっています。

・absoluteを指定すると、fixedのように振る舞う
・relativeを指定すると、ウィンドウ幅が伸縮することで位置が可変する

それぞれ同じ<header>を親としています。
親にはrelativeを与えてあります。

また、ひとつはpotisionプロパティを削除すると、
他の配置してある要素の位置が変わってしまいます。
親さえ違い、私には関連性の見出せない要素です。
現象の法則性が見出せず、苦戦しております。
何卒ご教示頂けませんでしょうか。
よろしくお願いいたします。

回答No.3

ORUKA1951 · ベストアンサー

No.1です。とりあえず、HTMLの文書構造が間違っている--特に閉じ忘れのタグがないかは注意してください。firefoxのツール→DOMインスペクターで解析されている樹構造を確認。
　★その上で、カスケーディングを見直す。--CSSカスケーディングスタイルシート---
　★後出しじゃんけんとは全く異なります。
　まず、出所・重要度でソートされます。
　1) ユーザー指定の最重要宣言＞著者の最重要宣言＞著者の指定＞ユーザーの指定＞ブラウザの指定
ついで
　2) 詳細度でのソート
　　　style属性(1000),一意セレクタ(0100),属性セレクタ(0010),要素セレクタ(0001),全称セレクタ、属性での指定(0000)
最後に
　3) 出現順位
　⇒6 プロパティ値とカスケーディング、継承の割り当て( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/cascade.html )

　firebugで確認されると、どのスタイルが適用されているか事細かにわかります。

お礼

ORUKA1951様
いつもお世話になっております。

こんなスバラシイツールがあるなんて、全くもって知りませんでした！
もっと早くに知っていれば・・・と後悔しております。

firebugを使って各構成要素を確認したところ、原因がつかめました。
ロゴに使用していたpngの透明部分の領域が非常に広く、またpositionの知識が
曖昧なまま使用していたこともあり、レイアウト崩れが発生していたのでした。

このツールすごいんですね。。。
本当に助かりました。また、お礼が遅くなって大変失礼いたしました。

回答No.2

noname#206842

ＣＳＳの記述に間違いがある！
ご存じだとおもいますが、CSSは、後出しじゃんけんと同じで、あとから記述されているものが優先されます。
同じIDまたは、クラスに、異なったposition要素を設定していませんか？・・・

後から記述されているものが、採用されているだけでは？・・・

お礼

nanden1548様

結論としてはpng画像のせいでしたが、

> 同じIDまたは、クラスに、異なったposition要素を設定していませんか？・・・

原因として、これも十分考えられるものでした。
念のため確認いたしました。

どうもありがとうございました。
また、お礼が遅くなって大変失礼いたしました。

回答No.1

ORUKA1951

最も考えられるのは、
「メモ: CSSスタイルシートを意図した通りに機能させるには、正しい文書解析木が必要です。つまり、正当なHTMLを用いるべきです。.( http://jigsaw.w3.org/css-validator/#validate_by_input )」
　じゃないかと。
　スタイルシートを書く前に、
　⇒Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html )
　のDATA入力などを利用してHTMLがきちんと書かれているか確認しましょう。

　製作されるなら、firefoxをお使いだと思いますが、firefoxの「開発者向けツール( https://addons.mozilla.jp/firefox/extensions/developer_tools/ )」に、文書チェックの「Html Validator」や、スタイルシートの継承などがわかりやすい「fire bug」があります。
　それらでも確認されているとは思いますが・・

・absoluteを指定すると、fixedのように振る舞う
　はないです。absoluteは、直近のstaticでない親コンテナブロックの位置を基準にします。fixedは、ディスプレイのサイズを基準にします。
　いずれも、それに続く要素は、その要素がなかったように振舞います。

・relativeを指定すると、ウィンドウ幅が伸縮することで位置が可変する
　relativeは、本来あるべき位置を基点として位置が決められます。relativeでないstaticのときの位置を確認します。