| Autor | Zpráva | ||
|---|---|---|---|
| robbie Profil |
#1 · Zasláno: 10. 8. 2019, 13:17:29
Zdravím, co má za význam overflow ve třídě v menu, overflow z anglického přetéci, co tady kde přetéká? Nechápu, objasní mi někdo důvod použití. Osobně by mě použít tuto vlastnost tady vůbec nenapadlo. Zkusil jsem vlastnost vynechat a menu se neukáže, ale proč?
Děkuji zdroj: www.w3schools.com/howto/tryit.asp?filename=tryhow_css_example_website .navbar {
overflow: hidden;
background-color: #333;
position: sticky;
position: -webkit-sticky;
top: 0;
} |
||
| Tomášeek Profil |
#2 · Zasláno: 10. 8. 2019, 13:53:31
robbie:
Zkus odebrat a uvidíš, co se stane. Třeba je zbytečný, což z daného kousku kódu nelze zjistit. Nastavením overflow se dá například ukončit plavání vnořených prvků.
|
||
| RastyAmateur Profil |
#3 · Zasláno: 10. 8. 2019, 16:08:22
robbie:
Jako koukal jsem na to asi 5 minut, než mi to došlo, tak to trochu odůvodním, ale je to přesně jak píše Tomášeek „Nastavením overflow se dá například ukončit plavání vnořených prvků.“ (to jsem třeba nevěděl)
Ty zbylé, neaktivní odkazy nemají nastavené pozadí, takže je transparentní. Barva písma je nastavená na bílou. Jenže pozadí celé stránky je taktéž bílé. Takže když odebereš overflow, neukončí se plavání vnořených prvků (viz Tomášeek), celý ten .navbar se najednou smrskne na 0px, tudíž pozadí není vidět a bílý text splyne s bílým pozadím zbytku stránky. Navíc ty další prvky, které již patří do obsahu, mají taktéž nastavený float, takže se zarovnají mezi ty ostatní plovoucí prvky.
Takže ne že by se menu neukázalo, jak ty píšeš, ono pouze splyne s okolím. Nevím, jestli jsem to dostatečně vysvětlil, tak ti to raději ještě ukážu. V CSSkách na řádku 26 vidíš zakomentovaný overflow a na řádku 41 jsem položkám v menu přiřadil růžové pozadí. Na výsledku je dobře vidět, že menu tam je stále, dokonce na stejném místě, jen se zruší ta hranice, kde se ukončuje plavání prvků a ty další se tedy vměstnají dohromady k menu. Často se to řeší tím způsobem, že pod to vytvoříš nový element, který zabere šířkou celou stránku, je vysoký 0px a má nastaveno clear: both;. Opět jsem vytvořil ukázku. Když se podíváš do HTML sekce na řádek 13, přibyl nový div s nastaveným clear. Menu zůstalo na samostatném řádku a obsah se zarovnal až pod to. V původní ukázce funkci vlastnosti clear zastupuje overflow, jak píše Tomášeek.
|
||
| robbie Profil |
#4 · Zasláno: 11. 8. 2019, 10:09:00
Děkuji moc chlapi, zase jsem o něco moudřejší, viděl jsem tu vlastnost overflow již vícekrát a pořád mi to vrtalo hlavou. Znám to spíše pod css vlastností clear, kterou používám tedy více.
Jste borci fakt. Děkuji ještě jednou. |
||
| Tomášeek Profil |
#5 · Zasláno: 11. 8. 2019, 11:07:51
robbie, RastyAmateur:
Jen doplním, že clear a overflow to nejsou ekvivalenty, což jsem myslel, že je zřejmé. Není, viz „Znám to spíše pod css vlastností clear, kterou používám tedy více.“
Takže, ekvivalenty to nejsou, ke clearování slouží clear. Overflow se dá někdy také použít, ale ne vždy - např. pokud vnořené elementy mají mít box-shadow, tak je overflow na rodiči usekne. Pokud má menu druhou úroveň, tak jí overflow usekne. Atd.
|
||
|
Časová prodleva: 5 let
|
|||
0