の違いが分からないので教えてください
<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で質問しましょう!
似たような質問が見つかりました
- HTML・CSS 初心者html・CSS ウィンドウを縮小するとタグの一部が隠れてしまう。 1 2023/12/18 19:52
- Java 次のhtml・cssでspan内の文字を点滅させるには、どのようにしたらよいのでしょうか。 1 2023/11/26 16:47
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- PHP ランキングを表示する際の画像の大きさを固定することは可能でしょうか? <?php if ( has_ 1 2022/07/21 14:55
- JavaScript clear機能を失わずにファイルアップロード機能を作成したい 3 2023/06/10 16:12
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
このQ&Aを見た人はこんなQ&Aも見ています
-
「どうして捨てられないの?」前妻の物を捨てられない男性の心理って?
前妻の物を捨てられない理由に加え、捨てるための手段はあるのかを専門家に聞いてみた!
-
HTMLです ブロック要素にするにはどうすれば良いですか?教えてくださいお願いします
HTML・CSS
-
HTMLとJavaScriptで作ったタイマーアプリが正常に動作しない
JavaScript
-
htmlの修正方法を教えていただきたいです。
HTML・CSS
-
-
4
HTMLでwebサイトを作ってるのですが、 ボタンが押された時にjsに書いている文章の 文字コードを
HTML・CSS
-
5
大至急。webのシングルページを作ろうと考え、イラレでデザインをしました。 それからの手順で悩んでる
HTML・CSS
-
6
HTMLソースが表示のページのものではない
その他(プログラミング・Web制作)
-
7
HTMLです 四角みたいにして中には ホ、 ア、 レ みたいに 上の四角は2つ、 下は左に1つ、 と
HTML・CSS
-
8
すいません HTMLです この画像をHTML、(もしくはCSS)で表すにはどうすれば良いですか? 教
HTML・CSS
-
9
1ページに全部載せた方がseo的にいい?
SEO
-
10
かっこいいウェブを作るテク
HTML・CSS
-
11
初心者html・CSS ウィンドウを縮小するとタグの一部が隠れてしまう。
HTML・CSS
-
12
ウェブ、孤立画像を検出する方法
その他(プログラミング・Web制作)
-
13
HTMLですCSSです 画像のように作りたいのですが 以下のようにあってますか?間違ってる感じがしま
HTML・CSS
-
14
HTMLとJavaScriptで作った表示して検索するWebアプリが正常に動かない
JavaScript
-
15
HTMLで作った時報アプリが動きません
JavaScript
-
16
デジタルブックを自分のウェブサイトに設置する方法を教えて
オープンソース
-
17
ワードプレスインストールできない
オープンソース
-
18
React hooksが値を返して配列変数に格納するメカニズム
JavaScript
-
19
プログラミングの勉強が進みません
HTML・CSS
-
20
javascriptの値をformのinput hiddenに入れたい
JavaScript
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
CSS <div>の入れ子が反映さ...
-
css固定したフッターが本文と重...
-
フッター上部に謎の隙間
-
ヘッダとフッタが固定でコンテ...
-
Flickity で画像にリンクを貼る...
-
オープニングにアニメーション...
-
フッターの下に隙間ができてしまう
-
【CSS】floatで左右に並べた...
-
大分類・中分類・小分類
-
【コーディング】途中から位置...
-
画像の特定の座標にカーソルが...
-
IE6のレイアウト崩れ
-
HTML CSS 文字化け
-
チェックボックスの背景色って...
-
html スクロール要素を下から表...
-
CSS 可変マージン
-
ワードプレスでレイアウトが崩...
-
スタイルシートで画面を上下に...
-
このタグはグラデーションです...
-
ラジオボタンで段階評価
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
フッター上部に謎の隙間
-
CSS <div>の入れ子が反映さ...
-
【CSS】floatで左右に並べた...
-
css固定したフッターが本文と重...
-
文字をクリックしたら別の文字...
-
textareaで入力した文字を改行...
-
オンマウス時に別画像を上に重...
-
スクロール可能なチェックボックス
-
文字を固定したいのですが…
-
1行で左寄せと右寄せと中央揃え...
-
Ctrl+F(検索)の窓を出したいの...
-
チェックボックスの背景色って...
-
Webサイト作成 プログレスバー ...
-
離れた場所にマウスオーバーで...
-
スタイルシートで画面を上下に...
-
メニューバーもスクロールに合...
-
ホームページのsidebar とconte...
-
CSSで背景を下までのばすには?
-
かなり困っています。知恵を貸...
-
TABLEの高さを固定したいのですが…
おすすめ情報
回答ありがとうございます
下記のうち<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>