Durante lo sviluppo di qualsiasi applicazione, la posizione dei componenti deve essere appropriata per un layout migliore. Ad esempio, la barra di navigazione è per lo più impostata nella parte superiore dell'applicazione e le informazioni laterali sono impostate su qualsiasi lato del documento, principalmente nella parte superiore, sinistra o destra i lati. Più specificamente, il CSS ti consente di utilizzare il "posizione"Proprietà con il valore"fisso"Per impostare le icone di navigazione per rimanere nella stessa posizione sull'applicazione sullo scorrimento.

Questo blog discuterà:

• Cos'è CSS “posizione" Proprietà?
• Come creare un elemento di posizione fissa usando CSS?

Qual è la proprietà "posizione" CSS?

Il CSS "posizione"La proprietà viene utilizzata per impostare la posizione dell'elemento sull'applicazione. I vari valori associati alla proprietà della posizione CSS sono "statico","assoluto","parente","fisso", E "appiccicoso".

Questi valori di proprietà possono essere impostati con le altre proprietà offset, come "superiore","Sinistra","metter il fondo a", E "Giusto"In CM, PX e altro ancora. Questi offset regolano la posizione degli elementi sulla pagina.

Come creare un elemento di posizione fissa usando CSS?

In HTML, aggiungi l'elemento Div con la classe "principale". All'interno dell'elemento Div, posizionare l'elemento associato ai seguenti attributi:

• "src"Viene utilizzato per specificare il collegamento dell'immagine.
• "classe"Attributo Accesso all'immagine in CSS o JavaScript utilizzando il nome specificato.
• "Al"L'attributo viene utilizzato per specificare il testo alternativo che verrà visualizzato se l'immagine non riesce a caricare sulla pagina.

Quindi, un elemento div con il nome di classe "contenuto"Viene aggiunto che contiene il

E

elementi per l'intestazione e il paragrafo, rispettivamente:

Il posizionamento fisso CSS

Ciao team Linuxhint!

Andiamo alla sezione CSS per decorare gli elementi HTML menzionati.

Stile Elementi "All"

*
Font-Family: Verdana, Ginevra, Tahoma, Sans-Serif;

L'asterisco " * “Il simbolo viene utilizzato per selezionare tutti gli elementi. Tutti gli elementi in HTML sono applicati con "famiglia di font"Proprietà con il valore impostato come"Verdana, Ginevra, Tahoma, sans-serif". Questo elenco di stili è fornito per garantire che se il browser non supporta il primo valore, altri verranno applicati.

Stile "Home" Div

.casa
Posizione: fissa;
Top: 35px;
A sinistra: 16px;

Le proprietà applicate all'elemento Div "casa"Sono descritti di seguito:

• "posizione"È specificato per specificare la posizione dell'elemento. Il valore "fisso"Imposterà la posizione dell'elemento fissata sul luogo specifico.
• "superiore"È la proprietà per regolare la posizione dell'elemento dalla parte superiore.
• "Sinistra"La proprietà viene utilizzata per regolare la posizione dell'elemento da sinistra.

Stile "contenuto" di stile

.contenuto
Background-color: CadetBlue;
larghezza: 300px;
Altezza: 350px;
imbottitura-sinistra: 40px;
Margin-Left: 80px;

Le proprietà CSS applicate all'elemento Div con il nome della classe "principale" menzionato sotto:

• "colore di sfondo"È specificato per l'impostazione del colore di sfondo dell'elemento.
• "larghezza"La proprietà definisce la larghezza dell'elemento HTML.
• "altezza"La proprietà definisce l'altezza dell'elemento HTML.
• "imbottitura-sinistra"La proprietà viene utilizzata per aggiungere lo spazio a sinistra del contenuto dell'elemento HTML.
• "margine-sinistra"La proprietà imposta spazio a sinistra dell'elemento Div.

Produzione

Può osservare dal risultato sopra riportato che la posizione dell'immagine è fissata alla finestra del browser a "35px" dalla parte superiore e "16px" da sinistra.

Conclusione

Il CSS "posizioneLa proprietà "è associata al valore"fisso"Valore per impostare la posizione dell'elemento fissata su un punto. Inoltre, questa proprietà è regolata con le sue proprietà offset, come la parte inferiore, superiore, destra e sinistra. Questo blog ha dimostrato il metodo per rendere la posizione fissa dell'elemento in CSS con un esempio pratico.