Mengapakah perkara berubah apabila saya menetapkan berbilang elemen kepada "kedudukan: mutlak"?

Question

Saya baru dalam HTML dan CSS jadi saya mahu penjelasannya semudah mungkin Saya sedang mengusahakan projek daripada mentor hadapan

Ini adalah kandungan html yang berkaitan:

<div class="info-holder">
        <div class="perfume-text-holder">
          <p class="perfume-text">PERFUME</p>
        </div>
        
        <div class="perfume-name-container">
          <p class="perfume-name">Gabrielle Essence Eau De Parfum</p>
        </div>
        
        <div class="desc-container">
          <p class="desc">
            A floral, solar and voluptuous interpretation composed by Olivier Polge,
            Perfumer-Creator for the House of CHANEL.
          </p>
        </div>

Berikut ialah kandungan CSS yang berkaitan:

.info-holder{
  position:relative;
}
.perfume-text-holder{
  position:absolute;
}
.perfume-text{
  color:gray;
  font-size:14px;
  letter-spacing:5px;
  font-family:Montserrat;
  font-weight: 500;
}

.perfume-name-container{
   position:absolute; 
}
.perfume-name{
  font-size:35px;
  font-family:Fraunces;
  margin-bottom: 0%;
}
.desc-container{
   position:absolute; 
}
.desc{
  font-size:17px;
  color:gray;
  font-family:Montserrat;
  font-weight:500;
  line-height:25px;
}

Beginilah rupa projek saya sekarang

Kini apabila saya menyahkomen pengisytiharan lokasi di bawah kelas "bekas-nama-minyak" dan "bekas-desc", projek saya kelihatan seperti ini:

Masukkan penerangan imej di sini

Dari pemahaman saya tentang kedudukan, ketiga-tiga div harus disusun bersama, tetapi tidak diimbangi ke kanan. Apa yang berlaku dan bagaimana saya boleh membetulkannya?

Saya telah cuba menggunakan arahan atas dan kiri tetapi mereka tidak menggerakkan div langsung

Answer 1

Mutlak - Elemen diletakkan secara mutlak kepada elemen induk kedudukan pertamanya. Relatif - Elemen diposisikan secara relatif kepada kedudukan normalnya.

Jika anda ingin menjajarkannya, gunakan grid atau lentur tanpa menggunakan mutlak atau relatif.

div {
display: flex;
flex-direction: column;
text-align: center;
 }