Ten element ma ustawione position na wartość fixed. Dodatkowo ustawiamy mu top na 100px, czyli będzie odsunięty od górnej krawędzi o 100px oraz left 50px, czyli od lewej krawędzi będzie odsunięty o 50px. Posiada także overflow-y ustawiony na scroll. Co więcej, mimo position fixed, element ten jest zasłaniany przez element szary z tego względu, że element szary ma ustawiony z-index na wyższy, niż z-index elementu niebieskiego.

Ten element jest ustawiony domyślnie - statycznie, czyli zgodnie z flow strony - jeden element pod drugim.

Ten element usawiowny jest relatywnie. Dodatkowo body ma ustawiony overflow-x na hidden. Tekst po prawej nie mieści się na ekranie. Naciśnij f12 i sprawdź w kodzie, że nie widać całego tekstu tego paragrafu. Nie widać nie widać nie widać nie widać

Ten element jest dzieckiem elementu z szarym tłem. Ten element ma ustawione position na absolute. Dodatkowo top ustawione na 20px i left na 300px. Oznacza to, że element będzie odsunięty 20px z góry, zaczynając od początku elementu szarego oraz z lewej strony od elementu szarego o 10px. Overflow jest ustawiony domyślnie na visible, dlatego mimo, że treść nie mieści się w naszym różowym elemencie, zwartość jest wyświetlana, ale nie dodany zostaje żaden suwak.

Ten element ma position ustawione domyślnie - static. Styl overflow-x i overflow-y ustawiony został na auto. Jeśli tekst wychodzi poza wielkość naszego elementu - w tym przypadku fioletowego - wtedy dodawany jest suwak. Właśnie wykroczył nam poza wysokość elementu, więc dodany został suwak pionowy. :)