ここから本文です

CSSで position:absoluteで、leftを指定しtopを指定しない場合のtopの扱いがわ...

mitinaga2008さん

2012/11/2218:16:28

CSSで position:absoluteで、leftを指定しtopを指定しない場合のtopの扱いがわかりません。

お世話になります。
たとえば次のようなスタイルを設定します。

#ue {width:200px; height:30%; margin:20px}
#sita {position:absolute;left:50px; height:70%; width:50%}

すると、「sita」はabsoluteなのでleftは50px右に移動するのですが、高さは「ue」の下に配置されます。
absoluteの場合、基準となるのは全体のウィンドウの左上なので、topを指定しなければ「sita」はウィンドウの上端に配置され、
「ue」に重なるのではないかと思うのですが・・・。
別にtopを設定すればまったく問題はありません。
topを設定しなかったときの配置がよくわからず混乱しています。
topを設定しなかったときの扱いを教えていただけないでしょうか。
どうか、よろしくお願いいたします。

補足sii_sideさん、さっそくのご回答ありがとうございます。
私の知識がなく、理解も悪くて、申し訳ありません
つまり「absoluteの場合、基準となるのは全体のウィンドウの左上」というのは
「absoluteでleftやtopに値が指定されたときは、基準となるのは全体のウィンドウの左上」で
「absoluteでも何でも、leftやtopがauto(指定されない)のときは、通常の位置が基準」
と考えてよろしいのでしょうか?
すみません、お世話になります。

この質問は、活躍中のチエリアン・専門家に回答をリクエストしました。

閲覧数:
437
回答数:
1

違反報告

ベストアンサーに選ばれた回答

プロフィール画像

カテゴリマスター

sii_sideさん

リクエストマッチ

編集あり2012/11/2411:11:28

適用対象のHTML要素の種類がわかりませんが、ここではブロックレベル要素(div要素など)とします。

------------

まず、CSSのプロパティはそれぞれ初期値を持っています。top(やbottom、left、right)プロパティの初期値はautoです。

今回はbottomも指定されていませんのでtop、bottomいずれもautoとなっており、heightが明示的に指定されています。この場合は、topが「通常の位置」になるように調整されます。

この場合は、#ueが絶対位置決めされておらず通常の配置がなされるため、その下におかれるのが「通常の位置」となります。

もし#ueにもposition: absoluteが設定されていた場合は、#ueが無いものとして配置するのが「通常」ですので、#sitaの上辺は上端に配置されるでしょう。

あとはさっさと解説サイトにお任せしてしまいますが、

--------------------
10.6.4 絶対位置決めの非置換要素

この節と次の節では,その趣旨のために「(要素の)静的な位置(static position)」という用語を参照する。大ざっぱには,要素が通常フローに属している場合の位置のことである。

(中略)

2.'top' と 'bottom' が 'auto' であり,'height' が 'auto' でないなら,'top' を静的な位置にセットする。そして 'margin-top' と 'margin-bottom' を 0 にセットし,上述の等式から 'bottom' を解く。

附録:CSS2.1の視覚整形モデル詳細 - CSS2リファレンス
http://hp.vector.co.jp/authors/VA022006/css/css21_visudet.html#abs-...
--------------------

上記の「通常の位置」は、解説では「静的な位置」として説明されています。top、bottom、height、(上下の)marginと多くの要素によって場合分けがされていますので、眺めてみて下さい。

------------

> 「absoluteでも何でも、leftやtopがauto(指定されない)のときは、通常の位置が基準」

んーと、必ずしもそういうわけでもないですね。

例えば今回も、もし#sitaのbottomプロパティにautoではない値が適用されていたとしたら、#sitaの上辺の位置は主にbottomとheightによって決められるでしょう。これは、「通常の位置」とは関係がありません。

--------------------
<!DOCTYPE html>
<title>sample</title>
<style>
.parent {
position: relative;
padding: 20px;
width: 500px;
height: 500px;
border: 1px solid #000;
}

.child {
position: absolute;
bottom: 40px;
width: 200px;
height: 200px;
background-color: #fcc;
}
</style>
<div class="parent">
<div class="child">child</div>
</div>
--------------------

一例ですがこんな例で.childについて考えてみると、.childにはrightが指定されていないためleftは通常の位置ですが、bottomが指定されているためtopは通常の位置ではありません。

質問した人からのコメント

2012/11/24 14:12:05

sii_sideさん。
ご丁寧にいろいろとご回答いただき、本当にありがとうございました。
たいへん参考になりました。感謝しております。

みんなで作る知恵袋 悩みや疑問、なんでも気軽にきいちゃおう!

Q&Aをキーワードで検索:

Yahoo! JAPANは、回答に記載された内容の信ぴょう性、正確性を保証しておりません。
お客様自身の責任と判断で、ご利用ください。
本文はここまでです このページの先頭へ

「追加する」ボタンを押してください。

閉じる

※知恵コレクションに追加された質問や知恵ノートは選択されたID/ニックネームのMy知恵袋で確認できます。