-1
divの連続があり、それぞれにスパンが含まれています（javascriptイベントのために表示されるかどうかは関係ありません）。divに応じてスパンを配置する
すべてのdivの一番下に配置するのではなく、親divの一番下に表示することはできません。
https://jsfiddle.net/3tqgyaff/5/
.layer {
bottom: 5px;
left: 5px;
/* padding: 2px; */
border-style: solid;
border-width: 0.5px;
border-color: whitesmoke;
width:75px;
height: 75px;
}
.listLayer {
bottom:5px;
left: 5px;
position: absolute;
cursor: pointer;
}
.layerChosen {
bottom: 5px;
left: 5px;
border-style: solid;
border-width: 0.5px;
border-color: whitesmoke;
width:75px;
height: 75px;
}
.layerHovered {
bottom: 5px;
left: 5px;
border-style: solid;
border-width: 0.5px;
border-color: whitesmoke;
width:75px;
height: 75px;
}
.layerHovered:after {
content: ' ';
position: absolute;
height: 75px;
width: 75px;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,696969+100&0+46,0.65+80 */
background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(48,48,48,0) 46%, rgba(84,84,84,0.65) 80%, rgba(105,105,105,0.65) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(48,48,48,0) 46%,rgba(84,84,84,0.65) 80%,rgba(105,105,105,0.65) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(48,48,48,0) 46%,rgba(84,84,84,0.65) 80%,rgba(105,105,105,0.65) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#a6696969',GradientType=0); /* IE6-9 */
}
.layerChosen:after {
content: ' ';
position: absolute;
height: 75px;
width: 75px;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,696969+100&0+46,0.65+80 */
background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(48,48,48,0) 46%, rgba(84,84,84,0.65) 80%, rgba(105,105,105,0.65) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(48,48,48,0) 46%,rgba(84,84,84,0.65) 80%,rgba(105,105,105,0.65) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(48,48,48,0) 46%,rgba(84,84,84,0.65) 80%,rgba(105,105,105,0.65) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#a6696969',GradientType=0); /* IE6-9 */
}
.layerName {
bottom: 2px;
text-shadow: darkgray;
position: absolute;
font-size: smaller;
color: white;
z-index: 2;
left: 2px;
}
.listLayer {
position : absolute;
}
.layerNameHover {
position: absolute;
}<div class="listLayer">
<div class="layer" id="layer_grey">
<span class="layerNameHover" style="visibility:hidden;" >grey</span>
</div>
<div class="layer" id="layer_cmap" >
<span class="layerNameHover" style="visibility:hidden;">cmap</span>
</div>
<div class="layer layerHovered" id="layer_stamen">
<span class="layerNameHover">stamen</span>
</div>
<div class="layerChosen"><span class="layerName" >bright</span>
</div>
</div>
それ*それは親のdivが上に積層されているだけのことだし、一番下に*であるように、これらのCSSルールでは、次のdivの先頭 –
写真を削除し、反応IDのような余分な情報を削除し、フィドルのインラインスタイルを削除します。 – Qwertiy
デバッグヘルプ（「なぜこのコードは動作していませんか？」）には、特定の問題またはエラー、および質問自体に再現するのに必要な最短コードが含まれている必要があります。明確な問題文がない質問は、他の読者にとって有用ではありません。参照：[最小限で完全で検証可能なサンプルの作成方法]（http://stackoverflow.com/help/mcve） –