display:flexが原因で機能しなかったが、position:relativeで機能するようになったのは何故か

前回の質問で、同じクラス名なのに指示が適用されないと言う質問の答えとして、display:flexが原因のため、擬似クラスを使う場合はpositionで位置関係も制御すれば解決と教えていただきました。結果、親要素.concrete-exampleにposition:relativeを指示すれば解決したのですが、何故位置関係を制御すれば解決されるのかがわかりません。
前回の質問

HTML
1<!DOCTYPE html>
2<head>
3    <meta charset="utf-8">
4    <title>建設</title>
5    <link rel="stylesheet" href="stylesheet.css" >
6</head>
7<body>
8    <header id="top">
9        <img src="https://danblog.tokyo/img/header_logo.png">
10        <ul>
11            <li>企業理念</li>
12            <li>施工事例</li>
13            <li>採用情報</li>
14            <li>お問い合わせ</li>
15        </ul>
16        <h1>街を作る。未来を作る。</h1>
17    </header>
18    <div class="info">
19        <h2>お知らせ</h2>
20        <div class="info-p">
21            <p>------------------------------------------------</p>
22            <p>------------------------------------------------</p>
23            <p>------------------------------------------------</p>
24        </div>
25    </div>
26    <div class=example>
27        <h2>施工事例</h2>
28        <div class="concrete-example">
29            <div class="saitama concrete">
30                <img class="photo" src="https://danblog.tokyo/img/building1.png">
31                <h3>M様邸新築工事</h3>
32                <p>埼玉県</p>
33                <a href="#top"><img class="details" src="https://danblog.tokyo/img/more.png"></a>
34            </div>
35            <div class="tokyo concrete">
36                <img class="photo" src="https://danblog.tokyo/img/building2.png">
37                <h3>スカイビル</h3>
38                <p>東京都</p>
39                <a href="#top"><img class="details" src="https://danblog.tokyo/img/more.png"></a>
40            </div>
41        </div>
42    </div>
43    <div class="lists">
44        <a href="#top">施工実績一覧</a>
45    </div>
46    <div class="menu">
47        <a href="#top"><img class="a" src="https://danblog.tokyo/img/company.png"></a>
48        <a href="#top"><img class="b" src=https://danblog.tokyo/img/recruit.png></a>
49        <a href="#top"><img class="a" src="https://danblog.tokyo/img/contact.png"></a>
50    </div>
51    <footer>
52        <a href="#top"><img src="https://danblog.tokyo/img/header_logo.png"></a>
53        <ul>
54            <a href="#top"><li>企業理念</li></a>
55            <a href="#top"><li>施工事例</li></a>
56            <a href="#top"><li>採用情報</li></a>
57           <a href="#top"><li>お問い合わせ</li></a>
58        </ul>
59        <p>Copyright © 2020 Aono Corporation.</p>
60    </footer>
61</body>

CSS
1*{
2    padding:0;
3    margin:0;
4}
5
6header{
7    background-image: url(https://danblog.tokyo/img/building2.png);
8    height:550px;
9    background-size: cover;
10}
11
12header img{
13    margin-left:180px;
14    margin-top:30px;
15
16    width: 130px;
17}
18
19header ul{
20    float:right;
21    display:flex;
22    margin-top: 50px;
23    margin-right: 90px;;
24}
25
26header li{
27    list-style: none;
28    margin-right: 80px;
29}
30
31header h1{
32    text-align: center;
33    padding-top:200px;
34    font-size:50px;
35    font-family:serif;
36}
37
38header img:hover{
39    cursor: pointer;
40    opacity:0.5;
41}
42
43header li:hover{
44    cursor: pointer;
45    opacity:0.5;
46}
47
48.info{
49    height:350px;
50}
51
52.info h2{
53    font-size: 50px;
54    text-align: center;
55    margin-top: 50px;
56    font-family:serif;
57}
58
59.info-p{
60    margin-top: 40px;
61    text-align: center;
62    width:30%;
63    margin-right:auto;
64    margin-left:auto;
65}
66
67.info-p p{
68    height:50px;
69    border-bottom: black 1px solid;
70    padding-top: 20px;
71}
72
73.example{
74    margin-top: 90px;
75    font-family:serif;
76}
77
78.example h2{
79    text-align: center;
80    margin-bottom: 50px;
81}
82
83.concrete{
84    width: 40%;
85    height:350px;
86}
87
88.concrete-example{
89    display:flex;
90    text-align: center;
91    position:relative;
92}
93
94.concrete h3{
95    padding-bottom: 10px;
96}
97
98.concrete p{
99    padding-bottom: 10px;
100}
101
102.saitama{
103    margin-left: auto;
104    margin-right: 0%;
105
106}
107
108.tokyo{
109    margin-right: auto;
110    margin-left: 0%;
111}
112
113.photo{
114    width: 70%;
115    height:80%;
116    padding-bottom: 10px;
117}
118
119.details{
120    width: 50%;
121    height:15%;
122}
123
124.details:hover{
125    opacity:0.5;
126    cursor:pointer;
127}
128
129.lists{
130    border:black 1px solid;
131    margin-top: 200px;
132    display: inline-block;
133    font-size: 20px;
134    font-family: serif;
135    margin-left:620px;
136    padding:10px 40px; 
137}
138
139.lists a{
140    color: black;
141    text-decoration:none;
142}
143
144.lists:hover{
145    opacity:0.5;
146    cursor:pointer;
147}
148  
149.menu{
150    display:flex;
151    width:100%;
152    height: 500px;
153    margin-top:200px;
154}
155
156.menu a{
157    display: inline-block;
158}
159
160.a{
161    width: 480px;
162    height: 500px;
163}
164
165.b{
166    width: 480px;
167    height: 500px;
168}
169
170.menu img:hover{
171    opacity:0.5;
172    cursor:pointer;
173}
174
175footer{
176    background-color: black;
177    color:white;
178}
179
180footer img{
181    margin-left:180px;
182    margin-top:10px;
183    width: 130px;
184    filter: saturate(10);
185}
186
187footer ul{
188    float:right;
189    display:flex;
190    margin-top: 30px;
191    margin-right: 90px;;
192    font-family:serif;
193}
194
195footer li{
196    list-style: none;
197    margin-right: 80px;
198    font-size:20px;
199}
200
201footer p{
202    text-align: center;
203    padding-top:50px;
204    font-size:15px;
205    font-family:serif;
206}
207
208footer a{
209    color: white;
210    text-decoration:none;
211}
212
213footer img:hover{
214    cursor: pointer;
215    opacity:0.5;
216}
217
218footer li:hover{
219    cursor: pointer;
220    opacity:0.5;
221}

FKM

2021/04/07 04:07

その前に、解決したのなら前回の質問をクローズしてもらっていいですか？

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

回答1件

ベストアンサー

重ね合わせ順の問題かと思います。

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

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

.detailsが.listの下に入っていたために:hoverが動作しなかったのですが、positionを指定したことによって重ね合わせ順が変わり、.detailsが.listの上に来たために、:hoverが動作するようになった、ということでしょう。

「display:flexが原因」というのは、よくわからないです。私見ですが、直接的な関係はないと思います。

サンプル

投稿2021/04/07 04:56

編集2021/04/07 05:28