Posizionamento fisso

Fa parte della sezione Stilizzare con CSS del percorso HTML di Coddy. Lezione 58 di 76.

In CSS, il posizionamento fisso mantiene un elemento nello stesso punto dello schermo, indipendentemente da quanto scorri. Quando imposti position: fixed;, l’elemento viene rimosso dal layout normale, così gli altri elementi lo ignorano. Rimane fissato alla finestra del browser, il che lo rende utile per intestazioni, piè di pagina o menu che dovrebbero essere sempre visibili.

Ecco la sintassi di base per usare il posizionamento fisso:

selector {
    position: fixed;
    top: value;
    right: value;
    bottom: value;
    left: value;
}

position: fixed;: Questa dichiarazione imposta il posizionamento dell'elemento su fisso.

top, right, bottom, left: queste proprietà specificano la posizione dell'elemento rispetto alla finestra di visualizzazione. Puoi usare valori positivi o negativi, specificati in pixel (px), em (em), percentuali (%) o altre unità CSS valide.

Per esempio:

.header {
    position: fixed;
    top: 0;
    left: 0;
}

In questo esempio, l'elemento con la classe header è fissato nella parte superiore della finestra con position: fixed;, top: 0; e left: 0;.

Sfida

Facile

Ti viene fornito un documento HTML con un'intestazione (<div>) e un paragrafo (<p>). Il tuo compito è usare il posizionamento fisso per fare in modo che l'intestazione rimanga in cima alla finestra di visualizzazione anche quando la pagina viene scorsa. Segui i passaggi seguenti:

Scrivi una regola CSS che selezioni l'elemento <div> con la classe header.
Imposta la proprietà position dell'elemento .header su fixed.
Imposta la proprietà top dell'elemento .header su 0 e la proprietà left su 0. In questo modo l'intestazione verrà posizionata nell'angolo in alto a sinistra della finestra di visualizzazione.
Imposta la proprietà width dell'elemento .header su 100% per farlo estendere per tutta la larghezza della finestra di visualizzazione.
Imposta la proprietà background-color dell'elemento .header su #fcc726 (giallo dorato), in modo che sia visibile sul contenuto della pagina.
Imposta la proprietà text-align su center, così avrà un aspetto migliore.

Provalo tu

<html>
<head>
    <title>Fixed Positioning</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="header">This is the header</div>
    <p>This is some content below the header. Scroll down to see the fixed positioning in action.</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
</body>
</html>