I'm new to HTML and CSS so I want the explanation to be as simple as possible I'm working on a project from a front-end mentor
This is the relevant html content:
<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>
This is the relevant CSS content:
.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; }
This is what my project looks like now
Now, when I uncomment the location declaration under "perfume-name-container" and "desc-container" classes, my project looks like this:
Enter image description here
From my understanding of positioning, all three divs should be stacked together, but not offset to the right. What's happening and how can I fix it?
I've tried using the top and left commands but they don't move the div at all
Absolute - An element is positioned absolutely to its first positioned parent element. Relative - The element is positioned relative to its normal position.
If you want to align them, use grid or flex without using so much absolute or relative.