Поместите пролет в зависимости от его div

Question

У меня есть последовательность div, каждая из которых содержит пролет (видимый или нет из-за некоторого события javascript).

Я просто не понимаю, почему видимый диапазон не может быть размещен прямо в нижней части его родительского 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>

Answer 1

Ваша проблема заключается в том, что вы используете position: absolute на внутренней span, где его родитель div имеет не position: relative.

Update эти правила CSS как этот

.layer { 
    bottom: 5px; 
    left: 5px; 
    /* padding: 2px; */ 
    border-style: solid; 
    border-width: 0.5px; 
    border-color: whitesmoke; 
    width:75px; 
    height: 75px; 
    position : relative;    /* added */ 
} 

.layerChosen { 
    bottom: 5px; 
    left: 5px; 
    border-style: solid; 
    border-width: 0.5px; 
    border-color: whitesmoke; 
    width:75px; 
    height: 75px; 
    position : relative;    /* added */ 
} 

.layerNameHover,      /* added this class to the rule */ 
.layerName { 
    bottom: 2px; 
    text-shadow: darkgray; 
    position: absolute; 
    font-size: smaller; 
    color: white; 
    z-index: 2; 
    left: 2px; 
} 

Sample

.layer { 
 
    bottom: 5px; 
 
    left: 5px; 
 
    /* padding: 2px; */ 
 
    border-style: solid; 
 
    border-width: 0.5px; 
 
    border-color: whitesmoke; 
 
    width:75px; 
 
    height: 75px; 
 
    position : relative; 
 
} 
 

 
.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; 
 
    position : relative; 
 
} 
 

 
.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 */ 
 

 
} 
 

 
.layerNameHover, 
 
.layerName { 
 
    bottom: 2px; 
 
    text-shadow: darkgray; 
 
    position: absolute; 
 
    font-size: smaller; 
 
    color: white; 
 
    z-index: 2; 
 
    left: 2px; 
 
} 
 

 
.listLayer { 
 
    position : absolute; 
 
}

<div class="listLayer" data-reactid=".0.0.2.1.3"> 
 
    <div class="layer" id="layer_grey" style="visibility: visible; background-image: url('http://lorempixel.com/75/75/abstract/1/');" data-reactid=".0.0.2.1.3.0:0"> 
 
     <span class="layerNameHover" style="visibility:hidden;" data-reactid=".0.0.2.1.3.0:0.0">grey</span> 
 
    </div> 
 
    <div class="layer" id="layer_cmap" style="visibility: visible; background-image: url('http://lorempixel.com/75/75/abstract/2/');" data-reactid=".0.0.2.1.3.0:1"> 
 
    <span class="layerNameHover" style="visibility:hidden;" data-reactid=".0.0.2.1.3.0:1.0">cmap</span> 
 
    </div> 
 
    
 
    <div class="layer layerHovered" id="layer_stamen" style="visibility: visible; background-image: url('http://lorempixel.com/75/75/abstract/3/');" data-reactid=".0.0.2.1.3.0:3"> 
 
    
 
    <span class="layerNameHover" style="visibility: visible;position: absolute;" data-reactid=".0.0.2.1.3.0:3.0">stamen</span> 
 
    
 
    </div> 
 
    
 
    <div class="layerChosen" style="background-image:url('http://lorempixel.com/75/75/abstract/4/');width:75px;height:75px;" data-reactid=".0.0.2.1.3.1:2">  <span class="layerName" data-reactid=".0.0.2.1.3.1:2.0">bright</span> 
 
    </div> 
 
</div>

Answer 2

.layerHovered { 
    position: relative; 
} 

.layerNameHover { 
    position: absolute; 
    bottom: 0; 
}