#1 Vlastnost overflow
Vlasnost overflow řeší, jak se zobrazí vnořené prvky, pokud je jejich obsah větší, než výška či šířka rodičovského, nadřazeného, prvku. Vlastnost overflow dokáže obsah schovat nebo přidat funkci scrollování.
Může obsahovat tyto hodnoty:
- visible – základní hodnota; obsah se ukazuje mimo prvek, pokud ho přesahuje
- hidden – obsah, který by se nacházel mimo prvek je skryt
- scroll – obsah, který by se nacházel mimo prvek je skryt, ale je přidán scroll-bar pro posouvání vně prvku
- auto – podobný hodnotě scroll, ale přidává scroll-bar pouze tehdy, je-li to nutné
Vlastnost overflow lze také specifikovat pouze pro osu X či Y jejími relativními vlastnostmi – overflow-x a overflow-y.
#2 Hodnoty
visible
Hodnota visible je základní hodnotou vlastnosti overflow.
Pokud obsah prvku je větší než samotný prvek (s definovaným rozměrem, jestliže není rozměr definován, prvek se sám natahuje podle potřeby), jeho obsah se zobrazí mimo prvek, ale neovlivní okolí prvku, pouze ho překryje.
* {
overflow: visible;
}
hidden
Hodnota hidden (již podle jejího názvu) skrývá jakýkoliv obsah, který by se vyskytl mimo prvek. Obsah pořád existuje, není však viditelný ani dosažitelný.
#obal {
height: 30px;
overflow: hidden;
}
scroll a auto
Hodnoty scroll a auto fungují jako hodnota hidden s rozdílem, že přidávají možnost posouvání (scroll), a obsah, i když zprvu neviditelný, je pořád přístupný.
Hodnota auto se od scroll liší tím, že přidává funkci posunu pouze tedy, nachází-li se obsah mimo prvku.
#obal {
height: 100px;
overflow: scroll;
}