の違いが分からないので教えてください .xx{position:absolute;} .yy{position:absolute;} abc xyz ||||||||||||||||||||||||||||||||||||| を実行するとabcとxyzと||||...||| が左端同一行に重なってわけが分からないものになります abc xyz ||||||||||||||||||||||||||||||||||||| と abc xyz ||||||||||||||||||||||||||||||||||||| 場合にはきちんとなるのですが両者は若干位置が異なります positionの指定absoluteとrelativeの使い方を教えてください

こんばんは＞positionの指定absoluteとrelativeの使い方を教えてください一般的に言えば・・ positionは文書内で要素がどのように配置されるかを設定します。通常のフローで配置されるのがstaticです。これに対してrelativeは、通常フローを基準にして、要素をオフセットして配置する場合に用いられます。 absoluteは、通常の文書フローからは外され、独立して縦・横方向の位置指定に従って相対配置されます。位置の基準になるのは、祖先要素のうちの位置指定された直近の要素です。・・となりますが、検索すればいくらでも解説サイトはあると思います。ここでの短い文章のみでの回答よりも、説明も多く図解等も使えるので遥かにわかりやすいはずです。アバウトな質問をすればアバウトな回答になりますので、あまたある解説サイトの超簡略版にしかなりません。疑問点を絞って質問なさった方が、適切な回答を得られると思います。もしかすると、「通常の文書フローから外され」という意味を理解なさっていないのかも知れませんね。その要素が存在しないものとして、他の要素を通常のフローに沿ってレイアウトし、その上で独立して当該要素を配置するという意味です。ですので、要素同士が重なって表示されることも十分にあり得ます。（と言うか、重なることを利用してレイアウトしている場合が多いかも）解説サイトの代表的な一例を以下に。 https://developer.mozilla.org/ja/docs/Web/CSS/position ちなみに、ご質問文にご提示のマークアップをそのまま表示すると全て同じ表示になります。（ご質問文のようにはなりません）理由は、ご提示のHTMLが正しくないので、その影響と考えられます。仮に、HTMLの誤っていそうな部分を修正すると、1番目と2番目は同じ表示に、3番目は異なる表示になります。 1と2はクラス名を変えてあるだけで、実質的な指定内容が同じだからですね。もっと変更すれば、違う状態にもなりますが、それは変更するからなので・・ 3番目の場合は、「基準となる要素」がご提示の範囲では示されていないので、1、2番目とは異なり、基準要素は祖先要素に遡ることになります。何も存在しない場合には、body要素を基準として配置されますので、結果として位置を示す計算値も変わることになります。また、absoluteの要素を抜いた包含要素（＝高さは保持している）は、通常フローでレイアウトされることになります。 absoluteの子要素しか持たない親要素は、自信がabsoluteの場合には（幅指定がなければ）幅が0となるので、子要素で幅の%を指定しても計算根拠がないことになります。いきなり、ネストさせて検証しようとするよりも、単純な場合でいろいろ値を変化させてみて、どのような仕組みになっているのかを確かめてください。表示させた状態で、ブラウザの「デベロッパーツール」を利用すると、レイアウトの根拠等を確認できるので便利かも知れません。 position:absolute の場合は、基本的に縦・横の方向の指定が必要ですので、わからないうちは必ず両方向（X方向、Y方向）を指定しておく方が問題は発生しにくくなるでしょう。

htmlのstyleのposition:relativeとpoition:abusoluteと無指定

解決済

質問者：reiman
質問日時：2023/12/23 16:53
回答数：2件

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

<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
通報する

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： gura_
回答日時：2023/12/23 22:24

reiman さん

　････positionの指定absoluteとrelativeの使い方･････

１．まず、position の正しい意味を理解すること。参考↓
https://www.tohoho-web.com/css/prop/position.htm

2．指定しない時は、初期値 static が適用されている。

３．absolute の要素は、親要素の中身とならないので、子要素が absolute だけだと、親要素は空になり、位置決めにしかならなくなる。

4．親が空だから left や right の % の数値も意味がなくなる。

５．兎に角、迷ったら、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>サンプル１　この下の 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>サンプル２　この下の 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>サンプル３　この下の 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>

- 0
- 件

通報する

参考程度に

No.2

回答者： fujillin
回答日時：2023/12/23 23:21

こんばんは

＞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方向）を指定しておく方が問題は発生しにくくなるでしょう。