Nasz nowo powstały problem możemy rozwiązać w dość prosty sposób, a mianowicie, dodając właściwość position wraz z wartością absolute do elementu p. Wspomniana właściwość sprawi, że element p stanie się elementem pozycjonowanym absolutnie, a więc jego szerokość będzie automatycznie dopasowywała się do jego zawartości (w naszym przykładzie, do długiego poziomego tekstu). position:absolute; Powstał nowy problem, ponieważ niemieszcząca się zawartość elementu #blok stała się widoczna. Stało się tak, ponieważ niemieszczącą się zawartością elementu #blok jest element p, do którego została dodana właściwość position wraz z wartością absolute, przez co nasz element p stał się elementem pozycjonowanym absolutnie, a domyślnie, pozycja, elementu HTML, który jest pozycjonowany absolutnie, jest liczona względem okna przeglądarki internetowej. Inaczej mówiąc, od tej pory nasz przykładowy element p jest tak jakby zawartością całego okna przeglądarki internetowej, a nie elementu #blok, w którym to elemencie został on umieszczony.
W tej części kursu CSS utworzymy animowany poruszający się tekst. Efekt końcowy został zaprezentowany poniżej. Ten tekst w tym elemencie - p - będzie poruszał się, gdy dodamy do niego odpowiednią animację oraz właściwości CSS. Nasz docelowy układ elementów HTML prezentuje poziomy, umieszczony w jednej linii, poruszający się tekst. Aby wykonać taki układ elementów HTML przyda się nam wiedza o elementach pozycjonowanych absolutnie oraz relatywnie, jak również wiedza o animacji CSS3. Pierwszym krokiem, jaki wykonamy, będzie utworzenie układu elementów HTML w kodzie dokumentu HTML, w części body.
Ten tekst w tym elemencie - p - będzie poruszał się, gdy dodamy do niego odpowiednią animację oraz właściwości CSS.