指定していないのに文字が画像の上に乗ってしまいます。

トップバーの下に画像を潜り込ませていますが、下のhogehogeなどの英文には何も指定していないので
画像の上に乗らないはずですが、乗ってしまっています。

なぜ、指定していないのにhogehogeの英文文字が画像よりも優先させて画像の上にのっかるのか？
また、なぜ指定していないのであれば、ブロック要素のように縦に画像の下にずれないのか？

そしてブロック要素のように縦に画像の下にどんどんコードを書いていきたいです。

質問の仕方が悪くてスミマセン

html
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5    <!--Metaタグ-->
6    <meta charset="UTF-8">
7    <meta http-equiv="X-UA-Compatible" content="IE=edge">
8    <meta name="viewport" content="width=device-width, initial-scale=1.0">
9
10    <!--Bootstrap CSS-->
11    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
12
13    <!--CSS-->
14   <link rel="stylesheet" href="style.css">
15
16    <title>Document</title>
17</head>
18
19<body>
20<div class="container nav-header">
21    <nav class="navbar navbar-expand-lg navbar-light bg-white">
22        <a class="navbar-brand" href="#">
23          <img class="p-3" src="" alt="">
24        </a>
25        <button class="navbar-toggler openIcon" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup"
26            aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
27            <span class="closeIcon">x</span>
28        </button>
29        <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
30            <div class="navbar-nav d-flex align-items-center">
31                <div class="nav-link " href="#"><a href="">ABOUT US</a></div>
32                <div class="nav-link" href="#"><a href="">PRICE</a></div>
33            </div>
34        </div>
35    </nav>
36</div>
37<div class="main-visual">
38  <img class="visual" src="https://picsum.photos/1400/300" alt="">
39</div>
40
41<div class="container">
42    <div class="article text-center">
43        <h3 class="text-success">hoge hogehoge hogege</h3>
44        <p class="text-success">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur eius soluta illum praesentium deleniti dicta minima rerum ea iusto quaerat doloribus illo ullam esse, distinctio, unde suscipit, officia sed? Quia?</p>
45    </div>
46</div>
47  
48    <!--Bootstrap Js-->
49    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
50
51
52    <script>
53        const navbarToggler = document.getElementsByClassName("navbar-toggler")[0];
54        const closeIcon = document.getElementsByClassName("closeIcon")[0];
55        closeIcon.style.display = "none";
56
57        navbarToggler.addEventListener("click", () => {
58            if(closeIcon.style.display == "none") {
59                closeIcon.style.display = "";
60                navbarToggler.classList.remove("openIcon");
61            } else {
62                closeIcon.style.display = "none";
63                navbarToggler.classList.add("openIcon");
64            }
65        });
66    </script>
67</body>
68
69</html>

CSS
1@charset "utf-8";
2/* ユニバーサルセレクタでマージンとパディングを消去とborder-boxの設置 */
3*, *:before, *:after {
4    -webkit-box-sizing: border-box;
5    box-sizing: border-box;
6    margin: 0;
7    padding: 0;
8    }
9    
10    body {
11        background-color:#FFF;
12        font-family: 'Avenir','Helvetica Neue','Helvetica','Arial','Hiragino Sans','ヒラギノ角ゴシック','Yu Gothic','メイリオ', 'ＭＳ Ｐゴシック','MS PGothic';/*　フォントの優先順位 */
13    }
14    
15    /*　サイズがデカい場合はスクロールで表示 */
16    html {
17        overflow-y:scroll;
18    }
19    
20    p,li,dt,dl,dd {
21        line-height:1.6;
22        font-size: 15px;
23        font-weight: 400;
24        margin:0 0 1em 0;
25    }
26    
27    /* スマホ用のCSS */
28    @media (max-width : 960px) {
29        p {
30            margin:0 0 1em 0;
31            font-size: 12px;
32            font-weight: 400;
33        }
34    }
35    li {
36        list-style-type:none;
37    }
38    img {
39        border:0;
40        padding: 0px !important;
41    }
42    address {
43        font-style:normal;
44    }
45    .clear {
46        clear:both;
47    }
48    
49    a:hover {
50        opacity: 0.9;
51        cursor: pointer;
52    }
53
54    
55    @media (max-width: 960px) {
56     .navbar-collapse {
57         position: fixed;
58         top: 50px;
59         right: 0;
60         padding-left: 15px;
61         padding-right: 15px;
62         padding-bottom: 15px;
63         width: 100%;
64         height: 100%;
65     }
66   
67     .navbar-collapse.collapsing {
68         right: -75%;
69         transition: height 0s ease;
70     }
71   
72     .navbar-collapse.show {
73         right: 0;
74         transition: right 300ms ease-in-out;
75     }
76   
77     .navbar-toggler.collapsed ~ .navbar-collapse {
78         transition: right 500ms ease-in-out;
79     }
80   }
81   
82   .navbar-toggler {
83       width:40px;
84       height:40px;
85       position: relative;
86   }
87   
88   .openIcon {
89       background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
90   }
91   
92   .closeIcon {
93       font-size:45px;
94       line-height: 0.6;
95       display: inline-block;
96       width: 40px;
97       height:40px;
98       position: absolute;
99       top:0;
100       left:0;
101   }
102
103   .nav-header {
104       position: relative;
105       z-index: 1;
106   }
107   .visual {
108       position: absolute;
109       top: 0;
110       left: 0;
111   }
112   .main-visual img {
113       width: 100%;
114   }
115   .article {
116       position: relative;
117      
118   }
119

yambejp

2021/06/01 05:22

＞画像の上に乗らないはずであれば、どうなる想定の質問でしょうか？

Larkiwing

2021/06/01 05:27

画像の下に来ることを想定しています。

yambejp

2021/06/01 05:42

＞画像の下画像の下とは、文字に画像がかぶさって見えなくする場合と画像の下側にズレて表示される・・・の２つの意味があります

Larkiwing

2021/06/01 06:24

ありがとうございます。質問を修正しました

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

回答2件

私もCSSの重ね合わせ問題は複雑すぎて明確に理解はできていないのですが、.articleにposition: relativeが指定されており、そうすると新たに重ね合わせコンテキストが発生するので.articleが上になるようです。

投稿2021/06/01 05:32

itagagaki

総合スコア8402

Larkiwing

2021/06/01 05:38

ということは、トップバーに重ねて表示するとややこしくなるのですね。position:relative;を使わない方向で重ねる方法を考える必要がありそうです。

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

ベストアンサー

ここで絶対配置をしているのが原因です。

css
1.visual {
2	position: absolute;
3	top: 0;
4	left: 0;
5}

絶対配置をした要素は通常のフローから外れるため、後続の要素は絶対配置した要素がないものとして上に詰められます。

補足欄を読んで追記

画像の下に来ることを想定しています。

なるほど、問題を理解しました。

それは以下で、相対配置をしていることが原因です。

css
1.article {
2	position: relative;
3}

つまり、position: absolute (relative)を指定した時点で通常の要素より上にきて、z-index: autoの振る舞いをします。そのため、transformなどのスタッキングコンテキストの後にposition要素を配置した場合、スタッキングコンテキストでもないのにも関わらず、スタッキングコンテキストより上になります。

君は真に理解しているか？z-indexとスタッキングコンテキストの関係 - ICS MEDIA

Within each stacking context, the following layers are painted in back-to-front order:

1. the background and borders of the element forming the stacking context.
1. the child stacking contexts with negative stack levels (most negative first).
1. the in-flow, non-inline-level, non-positioned descendants.
1. the non-positioned floats.
1. the in-flow, inline-level, non-positioned descendants, including inline tables and inline blocks.
1. the child stacking contexts with stack level 0 and **the positioned descendants with stack level 0**.
1. the child stacking contexts with positive stack levels (least positive first).

Visual formatting model

投稿2021/06/01 05:29

編集2021/06/01 05:44