divタグの位置を絶対的に再調整する

Question

Twitterのブートストラップを使用して、画像の色を変更する場所を選択できるプロジェクトを作成しています。私はそれを達成することができましたが、実際のイメージを構築するためにイメージの複数の部分を使用しています。これは色の変化する側面を達成するためです。

私は研究しており、理論的には、画像を互いに積み重ねることによって、私が望むものを達成するポジションアブソリュートを行っています。しかし、下に配置されることを意味するdivタグは、画像の上に表示されます。

誰かが私を助けてくれるのではないでしょうか？

<div class="container"> 
    <div class="col-md-6"> 
     <div class="row" align="center"> 
      <h1>Main Header</h1> 
     </div> 
     <div class="row" align="center"> 
      <img class="xbox" src="source"> 
      <img class="xbox" src="source"> 
      <img class="xbox" src="source"> 
      <img class="xbox" src="source"> 
      <img class="xbox" src="source"> 
      <img class="xbox" src="source"> 
     </div> 
     <div class="row">Text here</div> 
    </div> 
</div> 

その後、私はCSSでいます：

img.xbox { 
position: absolute; 
top: 50px; 
left: 50px; } 

は私もクラスとして、コントローラの部分にZインデックスを使用していた。ここ

は私のコードです画像が表示されるようになると、divタグが画像の上に表示されます。

ありがとうございます。

Answer 1

absoluteの要素は、DOMフローの場所を持っていません。したがって、フロー内の場所を持つ次の要素にmarginまたはpaddingを追加する必要があります。位置での元素として

Like this

.text { 
margin-top : 250px; 
} 

Answer 2

：あなたはあなたのニーズごととして指定された幅と高さ<div>要素であなたのイメージをラップする必要がありますので、絶対にDOMの通常の流れから取り出され...あなたがJsfiddlを作成してくださいすることができ

.image-box { 
 
    position: relative; 
 
    height: 200px; // modify this as per your needs 
 
    width: 200px; // modify this as per your needs 
 
}

<div class="row" align="center"> 
 
    <div class="image-box"> 
 
    <img class="xbox" src="source"> 
 
    <img class="xbox" src="source"> 
 
    <img class="xbox" src="source"> 
 
    <img class="xbox" src="source"> 
 
    <img class="xbox" src="source"> 
 
    <img class="xbox" src="source"> 
 
    </div> 
 
</div>