HTMLのabsoluteが理解できない

下の画像がめいいっぱい！？

cssでpositonをrelativeからabsoluteに変更してみたところ、HTMLで記述した下のセクションタグの画像が画面いっぱいに表示されました。
ググったりしましたが、ちょっとよく分かりません。。
ちなみに該当の場所はcssの.content {}のpositionです。

該当のソースコード

HTML
1<!DOCTYPE html>
2<html>
3
4<head>
5    <meta charset="utf-8">
6    <title>Move value | Learning Parallax effect</title>
7    <link rel="stylesheet" href="moveImages.css">
8</head>
9
10<body>
11    <section id="first" class="content">
12        <p class="logo">jQuery x HTML5 xCSS3</p>
13        <article>
14            <h1>Parallax sample.</h1>
15            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
16        </article>
17    </section>
18
19    <section id="second" class="content">
20        <article>
21            <h2 id="toc-only-css">Only.css</h2>
22            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
23        </article>
24    </section>
25
26    <section id="third" class="content">
27        <article>
28            <h2 id="toc-without-jquery">Without jQuery</h2>
29            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
30        </article>
31        <img src="https://github.com/wakamsha/learning-parallax/blob/master/img/wallpaper-417712.jpg">
32    </section>
33
34    <section id="theend" class="content">
35        <h2 id="toc-the-end">The End.</h2>
36    </section>
37    <script src="http://code.jquery.com/jquery-1.9.1.min.js">
38    </script>
39</body>
40
41</html>

該当のソースコード２

CSS
1body {
2    margin: 0;
3}
4
5article h2,
6article h1 {
7    font-size: 3.6em;
8    line-height: 1em;
9    margin: 25px 0;
10}
11
12.content {
13    border-bottom: 1px solid rgba(0, 0, 0, 0.4);
14    border-top: 1px solid rgba(255, 255, 255, 0.3);
15    box-shadow: 0 0 50px rgba(0, 0, 0, 0.8);
16    color: #333;
17    height: 1050px;
18    margin: 0 auto;
19    padding: 0;
20    position: relative; //ここをabsoluteにすると下の画像が上にきます。
21    width: 100%;
22}
23
24#first {
25    background: url(https://github.com/wakamsha/learning-parallax/blob/master/img/bg-parallaxsample01.jpg)
26}
27
28#second {
29    background: url(https://github.com/wakamsha/learning-parallax/blob/master/img/bg-parallaxsample02.jpg)
30}
31
32#third {
33    background: url(https://github.com/wakamsha/learning-parallax/blob/master/img/bg-parallaxsample03.jpg)
34}
35
36#theend {
37    background: url(https://github.com/wakamsha/learning-parallax/blob/master/img/bg-parallaxsample04.jpg)
38}
39
40/* section first */
41.logo {
42    color: rgba(255,
43            255,
44            255,
45            0.9);
46    font-size: 4em;
47    font-weight: bold;
48    margin: 0;
49    position: fixed;
50    top: 100px;
51    left: 50px;
52    text-shadow: 0 -1px rgba(0, 0, 0, 0.4);
53}
54#first article {
55    background: rgba(255, 255, 255, 0.9);
56    border: 1px solid rgba(150, 150, 150, 0.1);
57    box-shadow: 0 0 8px 4px rgba(0, 0 ,0, 0.4);
58    padding: 18px;
59    position: absolute;
60    top: 200px;
61    width: 800px;
62}
63/* second article*/
64#section {
65    padding: 80px 0;
66}
67#second article {
68    background: rgba(51, 51, 51, 0.9);
69    border: 1px solid rgba(150, 150, 150, 0.1);
70    box-shadow: 0 0 8px 4px rgba(0, 0, 0, 0.4);
71    color: white;
72    margin-left: 100px;
73    padding: 10px 20px;
74    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5);
75    line-height: 1.5em;
76    width: 445px;
77}
78
79/* section third */
80#third article {
81    background: rgba(51, 51, 51, 0.9);
82    border: 1px solid rgba(150, 150, 150, 0.1);
83    box-shadow: 0 0 25px rgba(0, 0, 0, 0.3);
84    color: white;
85    padding: 10px 20px;
86    margin: 100px 0 0 60%;
87    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5);
88    line-height: 1.5em;
89    color: white;
90    position: absolute;
91    top: 0;
92}
93#third img {
94    border: 8px solid white;
95    box-shadow: 0 0 8px 4px rgba(0, 0, 0, 0.4);
96    height: 350px;
97    width: 560px;
98    position: absolute;
99    left: 30px;
100    top:600px;
101    transform: rotate(-8deg);
102}
103
104/* section the end */
105#theend h2 {
106    color: white;
107    font-size: 4em;
108    left: 50%;
109    margin-left: -150px;
110    position: absolute;
111    text-shadow: 0 0 16px rgba(140, 123, 96, 0.8);
112    top: 180px;
113    width: 300px;
114}

hope_mucci

2021/06/22 17:23

どのような目的でrelativeをabsoluteに変えようとしたのでしょうか？単純にabsoluteとはどういう属性なのか知りたいだけでしょうか？それとも実現したいレイアウトがあっての変更なのでしょうか。目的を明確にすると的確な回答が得やすくなると思います。

Lhankor_Mhy

2021/06/23 01:28

ご提示のコードを試してみましたが、absoluteに変更しても https://github.com/wakamsha/learning-parallax/blob/master/img/wallpaper-417712.jpg は画面いっぱいに広がりませんでした。ご提示いただいていない部分に原因があると思われます。

saka_

2021/06/23 02:13

@hope_mucciさん >>教わりたいことが曖昧でした、申し訳ありません。試しにデベロッパーツールでrelativeをabsoluteにしてみたところ、一番下のベージュの画像のみが表示されて、なんでそうなったのかを理解できなかったので. . .

saka_

2021/06/23 03:13

@Lhankor_Mhy >>すみません、一番下に表示されるはずの画像のURLが間違っておりました。CSSの#theendのURLがミスってました。

saka_

2021/06/23 03:26

@Lhankor/Mhyさんのご指摘を受け、teratailに載っけたコードで試したところ、CORSというブラウザ側のセキュリティー？でしょうか、それに引っかかり、背景画像が表示されませんでした。本来であれば前に書かれた要素は画像で隠れるはずなのに. . . .

行動規範の内容に同意します

回答1件

ベストアンサー

position - CSS: カスケーディングスタイルシート | MDN

absolute
要素は文書の通常のフローから除外され、ページレイアウト内に要素のための空間が作成されません。直近の配置されている祖先があれば、それに対して相対配置されます。そうでなければ、初期の包含ブロックに対して相対配置されます。最終的な位置は top, right, bottom, left の値によって決定されます。

position - CSS: カスケーディングスタイルシート | MDN

絶対位置指定
相対位置指定の要素も、文書の通常のフローの中に配置されます。それに対して、絶対位置指定の要素はフローから除外されます。つまり、他の要素はこの要素が存在しないかのように配置されます。絶対位置指定の要素は配置された直近の祖先 (つまり、 static ではない直近の祖先) に対して相対的に配置されます。配置された祖先がない場合は、 ICB (initial containing block — W3C の定義も御覧ください) すなわち文書のルート要素の包含ブロックに対する相対的な配置になります。

通常のフローから除外されるので、他の要素から見れば存在しないものと扱われます。
また、top, right が指定されていないと初期値が top=0, left=0 なので左上に配置されます。
この左上というのは「直近の配置されている祖先」が基準になります。
.content の「直近の配置されている祖先」はbodyになりますので、４つの.content がすべて左上に重なって表示されています。見えているのは、最後の .content ということになってます。

投稿2021/06/23 03:08

hatena19

総合スコア33782

saka_

2021/06/23 04:06

bodyを基準に配置されることと、画像が重なって表示されるのを知って合点がいきました！感謝します！

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.47%

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

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

質問する

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

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