Czy dopełnienie względnie umieszczonego elementu wpływa (0,0) na absolutnie pozycjonowany element potomny? - css

To jest problem CSS, który nie ma dla mnie sensu ..

W tej chwili mam coś takiego:

.container {
height: 500px;
width: 500px;
position: relative;
padding: 10px;
}

.child {
top:0px;
left:0px;
position:absolute;
width: 100px;
height: 100px;
}

Dziecko ignoruje teraz dopełnienie rodzica. Wydaje mi się to sprzeczne z intuicją. Czy brakuje mi szybkiej poprawki (nie mogę dodać dopełnienia / marginesu do dziecka) Czy zepsułem DOCTYPE?

Dzięki! Matt Mueller

Odpowiedzi:

Ponieważ określono pozycję bezwzględną dla elementu potomnego, zachowanie to jest poprawne. Dziecko zostanie umieszczone absolutnie z lewą i najwyższą wartością.

W modelu pozycjonowania bezwzględnego a pole jest wyraźnie przesunięte względem szacunku do jego bloku zawierającego. Zostało usunięte od normalnego przepływu całkowicie (to ma brak wpływu na późniejsze rodzeństwo). Na ustanawia się pole absolutnie ustawione nowy blok zawierający dla normalnego przepływu dzieci i absolutnie (ale nie naprawiono) pozycjonowanych potomków. Jednak zawartość absolutnie pozycjonowany element nie płynie wokół wszelkie inne pola. Mogą przesłaniać zawartość innego pudełka (lub być zasłaniają się), w zależności od stosy nakładających się pól.

Model formatowania wizualnego - Bezwzględne pozycjonowanie