テキストを含むスライダーを作成しようとしています

Question

スライダーを作ろうとしています。私のdivsは#foo、＃bar、#textです。

#fooコンテナDIV

#barを#foo内部着色DIVです。可変幅の幅で塗りつぶします。

#textは（テキストを除く）#foo内部の透明div要素です。それは#barより大きいはずです。

Something like this (image)

どのように私はCSSでこれを達成することができますか？私のコードは、現在、このようなものになります。

#foo { 
 
    background: red; 
 
    width: 100px; 
 
    height: 20px; 
 
    z-index: 1; 
 
} 
 

 
#bar { 
 
    background: green; 
 
    width: 50px; 
 
    float: left; 
 
    height: 20px; 
 
    z-index: 2; 
 
} 
 

 
#text { 
 
    z-index: 3; 
 
}

<div id="foo"> 
 
    <div id="bar"></div> 
 
    <div id="text"> 
 
    Some text. 
 
    </div> 
 
</div>

Answer 1

単純に外箱を作るので、子要素は、その親の中にあるものの要素absoluteの両方を配置し、その後、外箱に相対あるrelativeを配置。 2つの内側のボックスに左上の位置を与えます。このような

#foo { 
 
    background: red; 
 
    width: 100px; 
 
    height: 20px; 
 
    z-index: 1; 
 
    position: relative; 
 
} 
 

 
/* Combined these since they share a lot in common */ 
 
#bar, #text { 
 
    /* Made width and height 100% as they are relative to the parent size now */ 
 
    width: 100%; 
 
    height: 100%; 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    z-index: 0; 
 
} 
 

 
#bar { 
 
    background: green; 
 
    width: 50px; 
 
} 
 

 
#text { 
 
    z-index: 1; 
 
}

<div id="foo"> 
 
    <div id="bar"></div> 
 
    <div id="text"> 
 
     Some text. 
 
    </div> 
 
</div>

Answer 2

何か：今、あなたのz-indexが、この修正スニペットをチェックアウトし、動作しますか？

#slider { 
 
    width: 200px; 
 
    height: 30px; 
 
    background-color: black; 
 
    position: relative; 
 
} 
 

 
#percentage { 
 
    color: white; 
 
    line-height: 30px; 
 
    margin-left: 10px; 
 
    position: absolute; 
 
} 
 

 
#bar { 
 
    width: 75%; 
 
    height: 30px; 
 
    background-color: red; 
 
    position: absolute; 
 
}

<div id="slider"> 
 
    <div id="bar"> 
 
    </div> 
 
    <div id="percentage">75%</div> 
 
</div>

Answer 3

以下ホバー上のローディングバーを記入します - あなたは、イベントハンドラの広い範囲のためのjQueryを使用したい場合があります。

<div id="foo"> 
     <div id="bar"></div> 
     <div id="text"> 
      Some text. 
     </div> 
    </div> 



    #foo { 
     background: green; 
     width: 100px; 
     height: 20px; 
     z-index: 1; 
     position: relative; 
     overflow: hidden; 

    } 

    #bar { 
     background: red; 
     width: 100%; 
     position: absolute; 
     left: 0; 
     height: 100%; 
     z-index: 2; 
     transition: left 0.5s ease-in-out; 
    } 

    #text { 
     z-index: 3; 
     position: absolute; 
     height: 100%; 
     width: 100%; 
    } 


    /* REMOVE BELOW AND EDIT #bar LEFT: VALUE FOR STATIC LOADING BAR */ 

    #foo:hover #bar{ 
     left: 100%; 
    }