My latest CSS experiment involved creating a flag of a country.
Check out my code:
div.flag {
width: 900px;
height: 600px;
background-color: red;
position: relative;
}
div.flag > div {
position: absolute;
top: 150px;
width: 900px;
height: 300px;
background-color: blue;
}
div.flag > div > div {
width: 200px;
height: 200px;
background-color: white;
border-radius: 50%;
position: relative;
left: 350px;
top: 50px;
}
p {
font-size: 5rem;
color: white;
text-align: center;
}
div.flag > div > div > p {
color: black;
}<div class="flag">
<p>The Flag</p>
<div>
<div>
<p>of Laos</p>
</div>
</div>
</div>After some trials, I noticed that when the circle is set to relative and no margin is specified for the text "of Laos", it pushes the circle down like this:
https://i.sstatic.net/2OqKK.jpg
However, if I change the circle's position to absolute without specifying the text margin, everything lines up perfectly:
https://i.sstatic.net/Yr4Us.jpg
I'm curious about why this happens. Any insights?