Overflow – właściwość porządkująca
- visible – wartość domyślna, to co wystaję po za element jest widoczne,
- hidden – wystająca zawartość będzie niewidoczna i nie będzie miało wpływu na pozostałe elementy,
- scroll – wystająca zawartość jest widoczna i dodaję się pasek przewijania do każdej osi, nawet gdy nie jest potrzebny,
- auto – dodaję pasek przewijania dla wystającej treści, ale tylko wtedy gdy on jest potrzebny
W poniższym przykładzie zobaczysz przykłady poszczególnych wartości:
divine-morning-n4g7d
divine-morning-n4g7d by danielminschinski
Overflow-y
Mamy możliwość decydowania o tym, które przewijanie (scroll) w danym kontenerze ma się pojawiać. Overflow-x przyjmuję takie same wartości jak overflow i odpowiada za poziome przewijanie. Overflow-y tak samo jak wyżej, tylko że odpowiada za oś pionową.
Spójrz na przykład. Zastosowałem w nim przewijanie pionowe z wartością auto.
elastic-dubinsky-qrvnr
elastic-dubinsky-qrvnr by danielminschinski
Overflow-x
Właściwość overflow-x przydaję się, gdy treść danego kontenera HTML jest szersza niż jego rozmiary, a edycja zawartości jest niemożliwa. Przykładowo, załóż że tworzysz tabele która ma piętnaście kolumn a mieści się tylko dziesięć. Co w takim przypadku zrobić Właściwość overflow-x przychodzi z pomocą. Dzięki niej możesz poprzecznie przewijać zawartość kontenera i nie ma to wpływu na pozostałe elementy strony.
Tak jak wyżej, przykład zobrazuję Ci różnicę między właściwościami.
billowing-flower-gu6hm
billowing-flower-gu6hm by danielminschinski
To by było na tyle na temat overflow. Mam nadzieję że przedstawiłem dość czytelnie różnice między właściwościami i wartościami😉
W kolejnym poście opiszę najważniejsze jednostki miar w CSS.
Polecam zapisać się do newslettera. Dzisiaj dodałem dla Was powiadomienia Web Push. Możecie zaakceptować powiadomienia w okienku które Wam wyskoczy przy wejściu na bloga, bądź akceptacja dzwoneczkiem w prawym dolnym rogu. Polecam👍
Jeżeli chciałbyś/chciałabyś wesprzeć mój blog to zapraszam -> WSPARCIE DLA BLOGA