質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

2回答

13013閲覧

position: relativeの親要素の中に子要素のpositionによる高さについて

退会済みユーザー

退会済みユーザー

総合スコア0

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

2クリップ

投稿2018/06/24 11:15

編集2022/01/12 10:55

親要素がposition: relativeの時に
子要素がposition: relativeで
その子要素には特にheight指定はないけど、
要素として存在する分のheightはあるんじゃないですか。
それが即ち、親要素のheightにもなるのではないのでしょうか?

親要素、子要素共にheightに対しての指定はない状況においてです。

なのに、なぜか次の要素が引きあがってきちゃうんですよ・・・。

何か、間違った理解をしているのでしょうか・・・。

子要素がabsoluteだったら、heightがなくて
次の要素が上がってくるのはわかりますが、
子要素がrelativeでも各子要素がheight指定がない限り
次の要素が上がってきちゃうのでしょうか?

現状はなぜかsection5が勝手に上がってきてるので、
margin-topでその分入れてますが、
relativeで入れたのにmarginでそこを確保すべきなのか?
コードで間違いがあったのかなと思い、
質問させて頂きます・・・。

html

1<section id="section4"> 2 <h2>Interview</h2> 3 <figure id="people-img"> 4 <img src="image/index/index_img09.png"> 5 </figure> 6 <div id="people-area"> 7 <a href="#" class="pic" id="pic01"> 8 <div class="a-hover"></div> 9 <p>01</p> 10 <div class="animated"> 11 <img src="image/index/index_img10.png"> 12 </div> 13 <div class="shadow"> 14 <div class="shadow-in"> 15 一番目の人 16 </div> 17 </div> 18 </a> 19 <a href="#" class="pic" id="pic02"> 20 <div class="a-hover"></div> 21 <p>02</p> 22 <div class="animated"> 23 <img src="image/index/index_img11.png"> 24 </div> 25 <div class="shadow"> 26 <div class="shadow-in"> 27 二番目の人 28 </div> 29 </div> 30 </a> 31 <a href="#" class="pic" id="pic03"> 32 <div class="a-hover"></div> 33 <p>03</p> 34 <div class="animated"> 35 <img src="image/index/index_img12.png"> 36 </div> 37 <div class="shadow"> 38 <div class="shadow-in"> 39 三番目の人 40 </div> 41 </div> 42 </a> 43 <a href="#" class="pic" id="pic04"> 44 <div class="a-hover"></div> 45 <p>04</p> 46 <div class="animated"> 47 <img src="image/index/index_img13.png"> 48 </div> 49 <div class="shadow"> 50 <div class="shadow-in"> 51 4番目の人 52 </div> 53 </div> 54 </a> 55 </section> 56 <section id="section5"></section>

css

1#section4 { 2 width: 1220px; 3 margin: 0 auto; 4 position: relative; 5 padding-top: 400px; 6 height: auto; 7} 8#section4 h2 { 9 font-size: 11.4rem; 10 letter-spacing: 0.16em; 11 text-align: center; 12 position: relative; 13 z-index: 1010; 14} 15#section4 #people-area { 16 width: 1100px; 17 margin: 0 auto; 18 display: flex; 19 flex-wrap: wrap; 20 position: relative; 21 flex-direction: row; 22} 23#section4 #people-img { 24 right: 25px; 25 position: absolute; 26 z-index: 10; 27 top: 370px; 28} 29#section4 #people-area #pic01 { 30 position: relative; 31 left: 70px; 32 top: 280px; 33} 34#section4 #people-area #pic02 { 35 position: relative; 36 right: 0px; 37 top: 670px; 38 z-index: 1000; 39} 40#section4 #people-area #pic03 { 41 position: relative; 42 left: 10px; 43 top: 1120px; 44} 45#section4 #people-area #pic04 { 46 position: relative; 47 right: 70px; 48 top: 1340px; 49 z-index: 1000; 50} 51#section5 { 52 margin-top: 1900px; 53 position: relative; 54 background-color: #fff; 55 height: 986px; 56 width: 100%; 57}

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2018/06/24 12:03

書かれている状況が再現するコード(HTML/CSSなど)を提示されたほうが回答を得やすいと思います。
退会済みユーザー

退会済みユーザー

2018/06/24 12:20 編集

失礼いたしました。コードより各要素の概念で私の理解に間違いがあるのではと思い、特に載せなかったです・・・。アドバイス通り、コード添付いたしました。ありがとうございます。
guest

回答2

0

親要素がposition: relativeの時に

子要素がposition: relativeで
その子要素には特にheight指定はないけど、
要素として存在する分のheightはあるんじゃないですか。
それが即ち、親要素のheightにもなるのではないのでしょうか?

この解釈は合っています。「#section4」の高さは、子要素の合計高さになっています。

子要素がrelativeでも各子要素がheight指定がない限り

次の要素が上がってきちゃうのでしょうか?

子要素は「height指定」をしていないので、マージンやパディングの指定が無ければ、テキストならテキスト分の高さしかありませんし、position: relativeは元の位置にスペース(幅・高さ)を確保しますが、移動先でもスペースを確保する訳ではありません。

(追記)
子要素に「z-index」を設定しないと「#section5」の下に隠れるところからも、position: relativeの移動先でのスペース確保がされないことが分かると思います。


「#section4」の子要素に「position」で「#section5」の前(上部)に設定しても影響しませんので、「#section5」にマージントップを設定しないと今回のケースのように離れません。

「kei344」さんのリンク先が「position」や組み方等参考になると思います。


私も参考までに(^^;)

今回のケースは以下のコードと内容は同じです。
box1が「#section4」
box2が「#section4」の子要素
box3が「#section5」
に該当します。box3のマージントップを「0」にして確認してみてください。

HTML

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4<meta charset="utf-8"> 5<meta http-equiv="X-UA-Compatible" content="IE=edge"> 6<title>example</title> 7<style> 8 9.box1 { 10 width: 200px; 11 height: 100px; 12 background-color: yellowgreen; 13 position: relative; 14} 15 16.box2 { 17 width: 200px; 18 height: 20px; 19 background-color: red; 20 position: relative; 21 top: 120px; 22 z-index: 10; 23} 24 25.box3 { 26 width: 200px; 27 height: 100px; 28 background-color: blue; 29 position: relative; 30 margin-top: 60px; 31} 32</style> 33</head> 34<body> 35 36 <div class="box1"> 37 <div class="box2"></div> 38 </div> 39 <div class="box3"></div> 40 41</body> 42</html>

投稿2018/06/24 23:15

編集2018/06/25 00:36
yoshinavi

総合スコア3521

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

何か、間違った理解をしているのでしょうか・・・。

position を使った位置決めをしているからそうなります。

【CSSのpositionを総まとめ!absoluteやfixedの使い方は?】
https://saruwakakun.com/html-css/basic/relative-absolute-fixed#section4

【CSSのposition:「absolute」と「relative」とは | UX MILK】
http://uxmilk.jp/63409#js-heading2


このあたりを参考に組み方自体を変えることをお勧めします。

【よこ並びのCSS。】
http://lopan.jp/layout/

【段組みのCSS。】
https://lopan.jp/layout2/


あと、<div id="people-area">の閉じタグがないですよ。

投稿2018/06/24 13:54

編集2018/06/24 13:54
kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問