Se stai imparando a usare i CSS per il tuo sito web, puoi usare Posizione nei CSS per progettare il tuo layout in modo che abbia un bell’aspetto. Così, Che cos’è la posizione nei CSS? Tino Group risponderà per te con esempi visivi con codice e immagini da farti vedere!
Contents
- 1 Che cos’è la posizione nei CSS?
- 2 Spiegazione dettagliata dei valori della proprietà Posizione in CSS
- 3 {posizione: fissa}
- 4 Domande frequenti sulla posizione nei CSS
- 5 Dove dovrei conoscere la posizione nei CSS e dove imparare i CSS?
- 6 Perché il menu permanente non funziona?
- 7 Cos’è il layout?
- 8 Come centrare una riga di testo su un’immagine?
- 9 Testo immagine
Che cos’è la posizione nei CSS?
Posizione in CSS Utilizzato per posizionare la visualizzazione di elementi di tag HTML e spesso utilizzato per creare CSS per menu a più livelli, descrizioni comandi e altre funzionalità relative alla posizione.
Posizioni in Posizione
Le posizioni su un piano come sai includono 4 posizioni principali: in alto, in basso, a sinistra, a destra rispettivamente, avremo posizioni di posizione come segue:
- In alto – sopra
- In basso – in basso
- Sinistra – sinistra
- Giusto giusto
Naturalmente, queste sono solo le posizioni più basilari, quando crei un layout, dovrai regolare la posizione molto di più combinando con altre proprietà CSS Position come nell’immagine:
Per capire in modo più intuitivo, dovresti esercitarti. Se hai paura di programmare da zero, puoi visitare questo link ed esercitarti a modificare i parametri e la posizione del quadrato!
5 valori di proprietà di base di Posizione in CSS
Normalmente avremo 4 proprietà principali tra cui: statico, relativo, fisso e assoluto. Inoltre, vedrai più proprietà come: sticky e altre 2 proprietà interessanti, initial, inherit.
Nell’articolo, Tino Group ha approfondito solo l’introduzione di 5 proprietà: statica, relativa, fissa, assoluta e appiccicosa!
- Posizione statica: la posizione/statica predefinita dell’elemento e la posizione in cui si posiziona l’elemento.
- Posizione relativa: la posizione dell’elemento sarà relativa alla posizione statica impostata e la quantità di spazio attorno all’elemento verrà preservata.
- Posizione fissa: la posizione verrà fissata in posizione, indipendentemente da ciò che fai, l’elemento rimarrà fisso in 1 posizione sullo schermo.
- Posizione assoluta: La posizione dell’elemento sarà determinata dal riempimento dell’elemento padre.
- Posizione appiccicosa: la posizione dell’elemento verrà posizionata quando l’utente utilizza la barra di scorrimento.
Spiegazione dettagliata dei valori della proprietà Posizione in CSS
La spiegazione preliminare sarà ancora difficile da capire e da immaginare. Qui, Tino Group spiegherà in dettaglio ogni valore di attributo con esempi illustrativi da comprendere e mettere in pratica!
Posizione statica
Posizione posizione statica o predefinita, il che significa che la posizione di questo elemento è determinata secondo le normali regole dei documenti.
Non sarai in grado di utilizzare proprietà CSS come: In alto, in basso, a sinistra, a destra per impostare la posizione di quell’elemento.
ANNUNCIO
Codice di esempio:
Questo elemento div ha {posizione: statico};
CSS {posizione:statico; a sinistra: 50px;}
Questo elemento div ha {position: static} e {left: 50px}
Ed ecco l’output durante l’esecuzione:
Posizione relativa
L’elemento posizionato con Posizione relativa sarà posizionato rispetto alla posizione statica. Puoi usare CSS come: In alto, in basso, a sinistra, a destra per posizionare l’elemento.
Codice d’esempio:
{posizione: relativa;}
posizione: relativa; larghezza: 250px;
{posizione: relativa; a sinistra: 50px; in alto:50px;}
posizione: relativa; larghezza: 250px;
a sinistra: 50px; in alto:50px;
Avrai il seguente risultato:
Quando utilizzi il browser, vedrai il seguente output:
Puoi vedere chiaramente che: le posizioni Top e Left dell’elemento sono state modificate. Tuttavia, la modifica qui cambia solo la posizione dell’elemento, non la dimensione dell’elemento.
Posizione fissa
L’elemento posizionato con Posizione fissa sarà posizionato rispetto al Viewport sul tuo browser. Sembra confuso, puoi fare riferimento a Viewport sul browser Chrome qui:
Codice d’esempio:
{posizione: fissa}
posizione:fissa; in basso: 20px; a destra: 15px;
Contenuto.. 1
Contenuto .. 2
Contenuto.. 3
Contenuto.. 4
Contenuto.. 5
Otterrai il seguente risultato:
Puoi ridurre a icona la finestra del browser e trascinare lo zoom avanti e indietro, vedrai che l’elemento giallo cambierà posizione in base a come ingrandisci la finestra del browser. In altre parole: stai facendo l’ancoraggio su 4 lati dell’elemento ai 4 bordi del browser con questa riga di codice:
posizione:fissa; in basso: 20px; a destra: 15px;
In questo modo il tuo elemento cambierà la sua posizione in base alla posizione del browser.
Posizione assoluta
Per un elemento posizionato con Posizione assoluta, l’elemento ha automaticamente la precedenza sull’elemento padre, il cui nonno più vicino contiene il relativo Posizione. Quando viene trovato un elemento contenente Posizione relativa, l’elemento posizionato con Posizione assoluta si posizionerà automaticamente rispetto a tale elemento. In caso contrario, l’elemento posizionato con Posizione assoluta prenderà la sua posizione rispetto al Viewport del tuo browser.
Codice di esempio:
CSS {posizione:assoluta}
Sono la linea div {position:relative} (rosso).
Tui è una linea div regolare (verde).
posizione: assoluta; in basso: 10px; a destra: 15px;
Risultato hai:
Quando lasci l’elemento giallo così com’è, la posizione verrà impostata rispetto all’elemento padre rosso. Quando riduci a icona la finestra e inserisci un segmento inferiore dell’elemento rosso, l’elemento giallo ora imposterà la sua posizione rispetto alla finestra del browser.
Posizione appiccicosa
L’elemento posizionato con Posizione permanente cambierà posizione in base allo scorrimento dell’utente. Con Posizione permanente, l’elemento passerà dinamicamente dallo stato parente lussuoso fisso e viceversa. La posizione appiccicosa è piuttosto interessante, vero!
Puoi esercitarti con la seguente riga di codice di base:
il menu cambierà di conseguenza.
Puoi esercitarti con la seguente riga di codice di base:
div.appiccicoso {
posizione: -webkit-sticky;
posizione: appiccicosa;
superiore: 0;
imbottitura: 5px;
colore di sfondo: #cae8ca;
bordo: 2px solido #4CAF50;
}
Prova a scorrere verso l’alto per vedere questo posizionamento appiccicoso in azione!
Internet Explorer ed Edge versione 15 e precedenti non supportano l’utilizzo della posizione permanente!
Sono appiccicoso!
In questo esempio, l’elemento permanente rimarrà in cima alla pagina (in alto: 0), quando raggiungi la sua posizione di scorrimento.
Alcuni testi per abilitare lo scorrimento.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affermare laboramus repudiandae nec et. Incident efficiantur il suo annuncio. Eum no molestiae voluptatibus.
Alcuni testi per abilitare lo scorrimento.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affermare laboramus repudiandae nec et. Incident efficiantur il suo annuncio. Eum no molestiae voluptatibus.
Avrai il seguente risultato:
Barra blu con testo Io sono quello appiccicoso! cambierà posizione mentre fai rotolare il rullo.
Puoi modificare la formulazione e la pratica qui.
Attraverso l’articolo, Tino Group ha risposto alle domande su cos’è la posizione nei CSS, oltre a fornire ogni esempio per ciascuna delle proprietà più intuitive per aiutarti a utilizzare la posizione nei CSS nel modo più efficace. Tino Group ti augura di diventare un maestro creativo e web designer con CSS!
Gli articoli si riferiscono a fonti: W3Schools, Mozilla, Kipalog e Open Planning.
Domande frequenti sulla posizione nei CSS
Dove dovrei conoscere la posizione nei CSS e dove imparare i CSS?
Tino Group ti suggerisce le seguenti 2 pagine per imparare a programmare in modo intuitivo, efficace e in molti linguaggi correlati gratuitamente: W3Schools e Open Planning.
Per W3Schools dovrai conoscere un po’ di inglese per poter imparare al meglio. Se vuoi usare la lingua vietnamita, puoi imparare direttamente a Open Planning!
Se sei sicuro di aver codificato correttamente, è molto probabile che il tuo browser non supporti Menu permanente, 2 browser Microsoft Internet Explorer e Edge versione 15 e precedenti non ti supportano per utilizzare Posizione permanente.
Cos’è il layout?
Il layout può essere inteso semplicemente come disporre la posizione degli elementi sul tuo sito Web in modo che sia bello. Puoi saperne di più su Layout qui.
Come centrare una riga di testo su un’immagine?
Per centrare il testo in un’immagine puoi utilizzare il tag di attributo centro. Puoi copiare il codice e salvarlo in formato html ed eseguirlo nel browser:
.container {
posizione: relativa;
}
.centro {
posizione: assoluta;
superiore: 50%;
larghezza: 100%;
allineamento testo: centro;
dimensione del carattere: 18px;
}
img {
larghezza: 100%;
altezza: auto;
opacità: 0,3;
}
Testo immagine
Il testo al centro dell’immagine:
Centrato
SOCIETÀ PER AZIONI DEL GRUPPO TINO
- Sede centrale: L17-11, Piano 17, Vincom Center Building, No. 72 Le Thanh Ton, Ben Nghe Ward, Distretto 1, Ho Chi Minh City
Ufficio di rappresentanza: 42 Tran Phu, Ward 4, District 5, Ho Chi Minh City - Telefono: 0364 333 333
Call center gratuito: 1800 6734 - E-mail: sales@tino.org
- Sito web: www.tino.org
- Biểu phí Techcombank 2021: Chuyển, rút tiền và dịch vụ thẻ
- Opencore Hackintosh là gì? Hướng dẫn cài Hackintosh bằng OpenCore | Acb-win.com
- Cách lì xì cho người thân, bạn bè đơn giản qua ứng dụng Zalo | Acb-win.com
- Cách đăng ký, đăng nhập Internet Banking VPBank Online mới nhất 2022 | Acb-win.com
- Justin Sun từ chức CEO của TRON Foundation, tuyên bố TRON đã “phi tập trung” | Acb-win.com
