架空の映画のネタバレレビュー

の違いが分からないので教えてください

<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の使い方を教えてください

質問者からの補足コメント

  • 回答ありがとうございます
    下記のうち<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>

    No.1の回答に寄せられた補足コメントです。 補足日時:2023/12/24 13:30

A 回答 (2件)

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>
この回答への補足あり
    • good
    • 0

こんばんは



>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方向)を指定しておく方が問題は発生しにくくなるでしょう。
    • good
    • 0
この回答へのお礼

回答ありがとうございます
positionの理解を深める必要があるようです
とりあえず其の場凌ぎで間に合わせたいと思います

お礼日時:2023/12/24 13:33

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!


おすすめ情報