Pozisyon mutlak tüm div etiketlerinin yeniden hizalanması

Question

Twitter Bootstrap'i kullanarak, değişecekleri bir görüntünün farklı renklerini seçebileceğiniz bir proje oluşturmak için kullanıyorum. Bunu başarmayı başardım, ancak gerçek görüntüyü oluşturmak için bir görüntünün birden çok parçasını kullanıyorum, bu yüzden renk değiştirme yönlerini başarabiliyorum.

Araştırma yaptım ve teorik olarak, görüntüleri birbirinin üzerine yığarak istediğimi gerçekleştiren mutlak pozisyonu yaptım. Bununla birlikte, altında konumlandırılmak istenen div etiketi görüntünün üstünde görünür.

Herkesin bana yardım edip edemeyeceğini merak ediyorum.

<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> 

Sonra CSS var:

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

Ben de bir sınıf ve sahip kumandanın kısımlarında z endeksini kullanmışlardır İşte

benim kodudur resim olması gerektiği gibi görünür, sadece div etiketi aşağıda göründüğü gibi resmin üstünde görünür.

Önceden teşekkür ederiz.

Answer 1

absolute konumunda bulunan bir öğenin DOM akışında yeri yoktur. Bu nedenle, akışta bir yeri olan bir sonraki öğeye margin veya padding eklemeniz gerekir. pozisyonuyla eleman olarak

.text { 
margin-top : 250px; 
} 

Answer 2

Like this

: Eğer kendi ihtiyaçlarınıza göre belirtilen genişlik ve yükseklik ile bir <div> eleman resimlerinizi sarmak gerekir böylece mutlak DOM normal akışından dışarı alınır ... sen

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