根据其div放置跨度

时间：2016-03-23 09:55:55

标签： html css

我有一连串的div，每个div包含一个span（可见或不是由于某些javascript事件）。

我只是不知道为什么可见范围不能放在其父div的底部，而不是放在所有div的底部。

这是小提琴：

https://jsfiddle.net/3tqgyaff/5/

＆＃13;
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：1)

您的问题是，您使用内容position: absolute span，其父div尚未position: relative。

像这样更新这些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;
}

样品

＆＃13;
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

.layerHovered {
  position: relative;
}

.layerNameHover {
  position: absolute;
  bottom: 0;
}
相关问题
最新问题