Impostare questo valore di proprietà su assoluto trascinerà l'oggetto fuori dalla normale posizione assoluta del flusso documentale, indipendentemente dalla disposizione del contenuto circostante. Se altri oggetti con proprietà z-index diverse occupano già una data posizione, non si influenzeranno tra loro, ma si sovrapporranno nella stessa posizione. L'oggetto non ha una macchia esterna (margine), ma ha comunque una macchia interna (margine) e un bordo (bordo).
Per attivare la posizione assoluta di un oggetto, devi specificare almeno uno degli attributi sinistra, destra, superiore e inferiore e impostare questo valore a assoluto. Altrimenti gli attributi sopra useranno il loro valore predefinito auto, il che farà sì che l'oggetto segua le normali regole di layout HTML e venga renderizzato immediatamente dopo l'oggetto precedente.
Gli attributi TRBL (IN ALTO, DESTRA, IN BASSO, A SINISTRA) sono validi solo se l'attributo posizione è impostato.
Dovresti impostare posizione:assoluto
Se il genitore (infinito) non imposta l'attributo posizione, allora l'assoluta corrente viene posizionata in combinazione con l'attributo TRBL nell'angolo in alto a sinistra del browser come punto originale
Se il genitore (infinito) imposta la proprietà di posizione, allora l'assoluta corrente viene posizionata in combinazione con la proprietà TRBL nell'angolo in alto a sinistra del genitore (recente) come punto originale.
Quando si imposta la posizione: relativa
L'angolo in alto a sinistra dell'area di contenuto genitore (recente) è il punto originale combinato con l'attributo TRBL (o offset rispetto all'elemento precedente dell'elemento posizionato nell'area di contenuto genitore), e l'angolo in alto a sinistra del CORPO è il punto originale senza il genitore. Il posizionamento relativo non può essere stratificato. Quando si utilizza il posizionamento relativo, l'elemento occupa comunque il suo spazio originale indipendentemente dal fatto che venga spostato o meno. Pertanto, spostare un elemento fa sì che sovrascriva altre riquadre.
In generale, se la pagina web è centrata, è facile commettere errori usando Assoluto, perché la pagina web si è sempre adattata automaticamente alla dimensione della risoluzione, mentre Assoluto userà l'angolo in alto a sinistra del browser come punto originale e non cambierà la posizione a causa del cambiamento di risoluzione. A volte è anche necessario affidarsi all'indice z per stabilire la relazione tra il contenitore superiore e quello inferiore, più alto è il valore, più alto è il valore superiore, e l'intervallo numerico è un numero naturale. Naturalmente, una cosa da notare è che la relazione genitore-figlio non può essere impostata con l'indice z, e il livello figlio deve essere sopra e sotto il genitore.
Impostare questo valore di proprietà su relativo mantiene l'oggetto nel normale flusso HTML, ma la sua posizione può essere spostata in base all'oggetto precedente. Il testo o gli oggetti che seguono un localizzatore relativo occupano uno spazio autonomo senza coprire lo spazio naturale dell'oggetto posizionato. Al contrario, il testo o l'oggetto dopo l'oggetto di posizionamento assoluto occupa il suo spazio naturale prima che l'oggetto bersaglio venga trascinato lontano dal normale flusso del documento. Posizionare un oggetto di posizionamento assoluto fuori dal viewport fa apparire una barra di scorrimento. Posizionare un oggetto di posizione relativa fuori dall'area di visualizzazione non appare con una barra di scorrimento. In effetti, il problema principale del posizionamento è ricordare il significato di ogni posizionamento. La posizione relativa è la posizione iniziale dell'elemento "relativo" al flusso del documento, mentre la posizione assoluta è l'elemento antenato che è stato posizionato "riguardo" quello più recente.
Ecco le aggiunte:
Anche se conosco il posizionamento assoluto (assoluto) e relativo del CSS, non ho mai scritto gli effetti rilevanti da solo!
Dopo aver lavorato più di mezza giornata, può essere considerato completo! Ho anche capito alcune di queste due caratteristiche!
Il riassunto è il seguente:
Diamo prima un'occhiata alla seguente struttura dei livelli
<body>
<div id=posi>
<div id=rel> Questo livello applica solo position:relative; Stile </div>
<div id=abs> Questo livello applica solo posizione:assoluto; Stile </div>
<div id=sss> non <div>applica gli stili
</div>
</body>
1. Assoluto: non occupa un seggio, relativo: ha un posto!
Ad esempio, la sovrastruttura:
I livelli con id rel occuperanno una riga quando vengono visualizzati! Lo strato ABS dietro di esso apparirà solo sulla linea successiva!
Quando viene visualizzato il layer con l'ID ABS, si sovrapponerà con l'ID dell'SSS dietro!
2. Per impostazione predefinita (non posizionata in combinazione con la parte superiore, ecc.), l'assoluto (posizionamento assoluto) è posizionato dal livello genitore
Ad esempio, se il livello sopra con ID è ABS, se non è posizionato in combinazione con TOP, la sua posizione di visualizzazione sarà con il livello POSI genitore (POSI si trova nell'angolo in basso a sinistra del documento e sarà anche nell'angolo in basso a sinistra)
3. Quando si combinano attributi superiori, inferiori, destra, sinistri e altri attributi, l'assoluto (posizionamento assoluto) è posizionato con la finestra come posizione, e il relativo è sbilanciato con la propria occupazione come base! Come segue:
<body>
<div id=posi>
<div id=sss> non <div>applica gli stili
<div id=rel> Questo livello applica position:relative; in fondo: 30 px; Stile </div>
<div id=abs> Questo livello applica solo posizione:assoluto; in fondo: 30 px; Stile </div>
</div>
</body>
Codice sopra:
Il layer con il rel id si sposta verso l'alto e sovrappone il livello con l'id SSS
Il livello con ID ABS verrà spostato a 30 pixel dalla finestra con la finestra come base!
4. Quando combini attributi superiore, inferiore, destra, sinistra e altri attributi, se vuoi che il livello assoluto (posizionamento assoluto) usi il livello genitore come base di posizionamento, puoi applicare attributi assoluti o relativi al livello principale! Come segue:
<body>
<div id=posi style="position:relative">
<div id=rel> Questo livello applica position:relative; in fondo: 30 px; Stile </div>
<div id=abs> Questo livello applica solo posizione:assoluto; in fondo: 30 px; Stile </div>
</div>
</body>
Il codice sopra: id è il livello di posi, puoi anche usare l'attributo assoluto!
ID è il livello di REL, che non è interessato, ed è compensato da un proprio segnaposto come baseline!
Il livello con id come ABS si basa sul bordo inferiore del livello POSI come linea di base di posizionamento; se l'altezza dello strato POSI è inferiore a 30px in questo momento, il livello ABS potrebbe non riuscire a vederlo!
|
Pubblicato su 30/10/2014 14:39:28
|
|
|
