の違いが分からないので教えてください
<html>
<style>
.xx{position:absolute;}
.yy{position:absolute;}
</style>
<div class="xx" style="height:24px">
<span class="xx" style="left:20%">abc</span>
<span class="xx" style="right:20%>xyz</span>
<div>
<div>|||||||||||||||||||||||||||||||||||||</div>
を実行するとabcとxyzと||||...|||
が左端同一行に重なってわけが分からないものになります
<div class="yy" style="height:24px">
<span class="xx" style="left:20%">abc</span>
<span class="xx" style="right:20%>xyz</span>
<div>
<div>|||||||||||||||||||||||||||||||||||||</div>
と
<div style="height:24px">
<span class="xx" style="left:20%">abc</span>
<span class="xx" style="right:20%>xyz</span>
<div>
<div>|||||||||||||||||||||||||||||||||||||</div>
場合にはきちんとなるのですが
両者は若干位置が異なります
positionの指定absoluteとrelativeの使い方を教えてください
No.1ベストアンサー
- 回答日時:
reiman さん
・・・・positionの指定absoluteとrelativeの使い方・・・・・
1.まず、position の正しい意味を理解すること。参考↓
https://www.tohoho-web.com/css/prop/position.htm
2.指定しない時は、初期値 static が適用されている。
3.absolute の要素は、親要素の中身とならないので、子要素が absolute だけだと、親要素は空になり、位置決めにしかならなくなる。
4.親が空だから left や right の % の数値も意味がなくなる。
5.兎に角、迷ったら、border や 背景色を付けて確認したらよいでしょう。
参考↓
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<html>
<style>
.wrap{
margin-top: 50px; background-color: #afd;
}
.xx{position:absolute; background-color: #fda; border: solid 4px brown; }
.yy{position:absolute; background-color: #55f; border: solid 4px blue;}
.box1{ border: solid 4px red;}
.box2{ border: solid 4px green;}
</style>
</head>
<body>
<div class="wrap">
<h3>サンプル1 この下の div class="xx" は中身は空で子要素の起点位置決めになる。その位置には次の div が表示される。</h3>
<div class="xx box1" style="height:24px">
<span class="xx" style="left:20%">abc</span>
<span class="xx" style="right:20%">xyz</span>
</div>
<div class="box2">|||||||||||||||||||||||||||||||||||||</div>
</div>
<div class="wrap">
<h3>サンプル2 この下の div class="yy" も中身は空で子要素の起点位置決めになる。その位置には次の div が表示される。</h3>
<div class="yy box1" style="height:24px">
<span class="xx" style="left:20%; top: 20px;">abc</span>
<span class="xx" style="right:20%">xyz</span>
</div>
<div class="box2">|||||||||||||||||||||||||||||||||||||</div>
</div>
<div class="wrap">
<h3>サンプル3 この下の div style="height:24px" は中身は空で縦位置決めにしかならない。その位置には次の div が表示される。</h3>
<div class="box1" style="height:24px">
<span class="xx" style="left:20%">abc</span>
<span class="xx" style="right:20%">xyz</span>
<div>
<div class="box2">|||||||||||||||||||||||||||||||||||||</div>
</div>
</body>
</html>
No.2
- 回答日時:
こんばんは
>positionの指定absoluteとrelativeの使い方を教えてください
一般的に言えば・・
positionは文書内で要素がどのように配置されるかを設定します。
通常のフローで配置されるのがstaticです。
これに対してrelativeは、通常フローを基準にして、要素をオフセットして配置する場合に用いられます。
absoluteは、通常の文書フローからは外され、独立して縦・横方向の位置指定に従って相対配置されます。位置の基準になるのは、祖先要素のうちの位置指定された直近の要素です。
・・となりますが、検索すればいくらでも解説サイトはあると思います。
ここでの短い文章のみでの回答よりも、説明も多く図解等も使えるので遥かにわかりやすいはずです。
アバウトな質問をすればアバウトな回答になりますので、あまたある解説サイトの超簡略版にしかなりません。
疑問点を絞って質問なさった方が、適切な回答を得られると思います。
もしかすると、「通常の文書フローから外され」という意味を理解なさっていないのかも知れませんね。
その要素が存在しないものとして、他の要素を通常のフローに沿ってレイアウトし、その上で独立して当該要素を配置するという意味です。
ですので、要素同士が重なって表示されることも十分にあり得ます。
(と言うか、重なることを利用してレイアウトしている場合が多いかも)
解説サイトの代表的な一例を以下に。
https://developer.mozilla.org/ja/docs/Web/CSS/po …
ちなみに、ご質問文にご提示のマークアップをそのまま表示すると全て同じ表示になります。(ご質問文のようにはなりません)
理由は、ご提示のHTMLが正しくないので、その影響と考えられます。
仮に、HTMLの誤っていそうな部分を修正すると、1番目と2番目は同じ表示に、3番目は異なる表示になります。
1と2はクラス名を変えてあるだけで、実質的な指定内容が同じだからですね。
もっと変更すれば、違う状態にもなりますが、それは変更するからなので・・
3番目の場合は、「基準となる要素」がご提示の範囲では示されていないので、1、2番目とは異なり、基準要素は祖先要素に遡ることになります。
何も存在しない場合には、body要素を基準として配置されますので、結果として位置を示す計算値も変わることになります。
また、absoluteの要素を抜いた包含要素(=高さは保持している)は、通常フローでレイアウトされることになります。
absoluteの子要素しか持たない親要素は、自信がabsoluteの場合には(幅指定がなければ)幅が0となるので、子要素で幅の%を指定しても計算根拠がないことになります。
いきなり、ネストさせて検証しようとするよりも、単純な場合でいろいろ値を変化させてみて、どのような仕組みになっているのかを確かめてください。
表示させた状態で、ブラウザの「デベロッパーツール」を利用すると、レイアウトの根拠等を確認できるので便利かも知れません。
position:absolute の場合は、基本的に縦・横の方向の指定が必要ですので、わからないうちは必ず両方向(X方向、Y方向)を指定しておく方が問題は発生しにくくなるでしょう。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・一回も披露したことのない豆知識
- ・これ何て呼びますか
- ・チョコミントアイス
- ・初めて自分の家と他人の家が違う、と意識した時
- ・「これはヤバかったな」という遅刻エピソード
- ・これ何て呼びますか Part2
- ・許せない心理テスト
- ・この人頭いいなと思ったエピソード
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・あなたの習慣について教えてください!!
- ・ハマっている「お菓子」を教えて!
- ・高校三年生の合唱祭で何を歌いましたか?
- ・【大喜利】【投稿~11/1】 存在しそうで存在しないモノマネ芸人の名前を教えてください
- ・好きなおでんの具材ドラフト会議しましょう
- ・餃子を食べるとき、何をつけますか?
- ・あなたの「必」の書き順を教えてください
- ・ギリギリ行けるお一人様のライン
- ・10代と話して驚いたこと
- ・家の中でのこだわりスペースはどこですか?
- ・つい集めてしまうものはなんですか?
- ・自分のセンスや笑いの好みに影響を受けた作品を教えて
- ・【お題】引っかけ問題(締め切り10月27日(日)23時)
- ・大人になっても苦手な食べ物、ありますか?
- ・14歳の自分に衝撃の事実を告げてください
- ・架空の映画のネタバレレビュー
- ・「お昼の放送」の思い出
- ・昨日見た夢を教えて下さい
- ・ちょっと先の未来クイズ第4問
- ・【大喜利】【投稿~10/21(月)】買ったばかりの自転車を分解してひと言
- ・メモのコツを教えてください!
- ・CDの保有枚数を教えてください
- ・ホテルを選ぶとき、これだけは譲れない条件TOP3は?
- ・家・車以外で、人生で一番奮発した買い物
- ・人生最悪の忘れ物
- ・【コナン30周年】嘘でしょ!?と思った○○周年を教えて【ハルヒ20周年】
- ・10秒目をつむったら…
- ・人生のプチ美学を教えてください!!
- ・あなたの習慣について教えてください!!
- ・都道府県穴埋めゲーム
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
オンマウス時に別画像を上に重...
-
★★★フッター最下部固定/スクロ...
-
ポップアップ中に動くカウント...
-
フッターの下に隙間ができてしまう
-
チェックボックスの背景色って...
-
MAX関数を使ってからLEFT JOIN...
-
JSPでの画像ファイル表示
-
背景色を透明化
-
iframe内のリンクが飛ばないの...
-
eclipseでcssを使うためには?
-
javascript 神経衰弱 表に返...
-
jqueryのsortableで一部ソート...
-
textareaに画像を表示したい
-
複数の要素へ appendchild でき...
-
JavaScriptで変更した属性の元...
-
createElementで作成した要素を...
-
fontsize.jsでhtmlの大中小の設...
-
読み込んだQRコードをフォーム...
-
指定したフォルダの画像を一括...
-
ページ読み込み完了の3秒後にリ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
フッター上部に謎の隙間
-
CSS <div>の入れ子が反映さ...
-
オンマウス時に別画像を上に重...
-
Ctrl+F(検索)の窓を出したいの...
-
スタイルシートで画面を上下に...
-
JQuery UIを使用したドラッグ&...
-
スクロール可能なチェックボックス
-
文字を固定したいのですが…
-
floatさせたdivタグを折り返さ...
-
TABLEの高さを固定したいのですが…
-
【CSS】floatで左右に並べた...
-
すいません、このタグですが、...
-
youtubeをHPに載せたいです。
-
スライダーの枠に動画を収める...
-
リンクで違うページの指定箇所...
-
メニューやヘッダー背景だけを...
-
CSSを使って3カラムにしたいの...
-
positionのrelativeとabsolute...
-
フッターの下に隙間ができてしまう
-
【html5】canvasでの文字の形の...
おすすめ情報
回答ありがとうございます
下記のうち<div class="yy" style="height:24px">の class="yy" を削除すると左に1mm程ずれます
class="yy" は付けない方が正解でしょうか?
<html>
<style>
.xx{position:absolute}
.yy{position:relative}
</style>
<div class="yy" style="height:24px">
<span class="xx" style="left:20%">abc</span>
<span class="xx" style="left:80%">xyz</span>
</div>
<div>|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||</div>
</html>