Pevná pozice
Prvek s position: fixed (pevná) je vyjmutý z normálního toku, stejně jako absolutní. Jeho posuny se ale vždy měří od krajů okna prohlížeče, ne od stránky ani od předka. Proto zůstává na stejném místě obrazovky, i když stránku posouváte.
Pevnou pozici používáme pro věci, které mají být pořád po ruce: tlačítko, které vás vrátí nahoru, tlačítko chatu nebo lištu se zprávou u spodního kraje okna.
Na konec stránky o kočce jsme přidali odkaz, který vás vrátí nahoru:
<a href="#" class="nahoru">Zpět nahoru</a>Jak víte z kurzu HTML, odkaz na # posune stránku úplně nahoru. V souboru style.css jsme odkaz upravili, aby vypadal jako tlačítko.
Abyste mohli posouvání vyzkoušet, stránku jsme také prodloužili: v pravidle pro body říká min-height: 200vh, že stránka musí být alespoň dvakrát vyšší než okno. Vlastnost min-height nastavuje minimální výšku: na rozdíl od height dovolí prvku být vyšší, pokud jeho obsah potřebuje víc místa.
Jak psát:
"
{
}
#
Pokyny
Nejdřív vyzkoušejte absolutní pozici. Do pravidla pro .nahoru přidejte position: absolute, bottom: 20px a right: 20px. Odkaz se přesune do pravého dolního rohu náhledu. Teď posuňte stránku dolů: odkaz odjede spolu s ní. Když žádný předek nemá pozici, měří se totiž absolutní posuny od první obrazovky stránky (oblasti velké jako okno na úplném začátku stránky), ne od okna.
Teď změňte absolute na fixed. Posuňte stránku znovu: odkaz zůstává celou dobu v rohu okna. Klikněte na něj a stránka se posune zpět nahoru.
Začněte programovat zdarma
8/10