position:relativeとabsolute

CSS
1<html>
2<head>
3<title>CSS size of div example</title>
4 
5<style type="text/css">
6
7    .gallerycontainer{
8    position: relative;
9
10    }
11
12    .thumbnail img{
13    border: 1px solid white;
14    margin: 0 5px 5px 0;
15    }
16
17    .thumbnail:hover{
18    background-color: transparent;/*透明*/
19    }
20
21    .thumbnail:hover img{
22    border: 1px solid blue;
23    }
24
25    .thumbnail span{ /*CSS for enlarged image*/
26    position: absolute;
27    background-color: lightyellow;
28    padding: 5px;
29    left: -1000px;/* 画面から飛ばしてる（imgの要素が追加されたときに重なってしまうから）*/
30    border: 1px dashed gray;
31    visibility: hidden;
32    color: black;
33    text-decoration: none;
34    }
35
36    .thumbnail span img{ /*CSS for enlarged image*/
37    border-width: 0px;
38    padding: 2px;
39    }
40
41    .thumbnail:hover span{ /*CSS for enlarged image*/
42    visibility: visible;
43    top: 0;
44    left: 230px; /*position where enlarged image should offset horizontally */
45    z-index: 50;
46    }
47</style>
48</head>
49<body>
50    <hr>
51    <div class="gallerycontainer">
52        <a class="thumbnail" href="#thumb"><img src="../img/photo.jpg" width="100" height="66" border="0" /><span><img src="../img/pic.png" />
53        <br />Mother Earth.</span></a>
54
55        <a class="thumbnail" href="#thumb"><img src="../img/pic.png" width="100" height="66" border="0" /><span><img src="../img/photo.jpg" />
56        <br />My Staff</span></a>
57        <br />
58
59        <a class="thumbnail" href="#thumb"><img src="../img/photo.jpg" width="100" height="75" border="0" /><span><img src="../img/pic.jpg" width="100" height="100"/>
60        <br />All the best</span></a>
61     <br />
62
63    </div>
64  
65</body>
66</html>/body>
67</html>

質問内容

.gallerycontainerの{position: relative;}というスタイルは.thumbnail span{position: absolute;}の親要素として指定するために記述されているのだろうと思います。
では、.thumbnail:hover spanの{top: 0;とleft: 230px;}にはrelativeもabsoluteも記述されていませんが、何を基準にして動かしているのでしょうか。よろしくお願いします。

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

回答2件

ベストアンサー

勘違いされているようですが:hoverはもとの要素（今の場合だと.thumbnail span）に「ホバー時にだけ『追加』で当たるcss」になるので.thumbnail span{position: absolute;}があたっているので.thumbnail:hover spanには{position: absolute;}があたっている前提となります。

なので「relativeもabsoluteも記述されていません」ではなく記述する必要がありません。:hover時に追加または上書きしたいcssを書くだけです。

本当に何もない場合はイニシャルコンテンツブロック（bodyだったかな）が基準になります。そうでない場合は自分の親でposition:static以外の要素を持つ一番近いものが基準になるはずです。

投稿2018/04/01 23:11