Разница между абсолютным внутри абсолютного и относительным внутри абсолютного ⇐ CSS

[Anonymous]

Недавно я попробовал проект CSS, чтобы нарисовать флаг страны.
Вот мой код:

Код: Выделить всё

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

Код: Выделить всё

The Flag


of Laos

Когда я не указываю поля текста «Лаоса» и относительное положение круга, текстовое поле смещает круг вниз следующим образом:
[img]https://i.sstatic .net/2OqKK.jpg[/img]

Но когда Я установил абсолютное положение круга и не указал поле текста, положение круга получается правильным:
[img]https:// i.sstatic.net/Yr4Us.jpg[/img]

Что именно происходит? Кто-нибудь может помочь?

Подробнее здесь: https://stackoverflow.com/questions/767 ... e-absolute