Posizione assoluta, qualcuno può spiegarlo

StackOverflow https://stackoverflow.com/questions/97683

  •  01-07-2019
  •  | 
  •  

Domanda

Ecco uno snippet di CSS che ho bisogno di spiegazioni:

#section {
    width: 860px;
    background: url(/blah.png);
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -445px;
}

Ok, quindi è il posizionamento assoluto di un'immagine, ovviamente.

  1. top è come un'imbottitura dall'alto, giusto?
  2. cosa fa il 50% rimasto?
  3. perché il margine sinistro è a -445px?

Aggiornamento:la larghezza è 860px.L'immagine reale è 100x100 se questo fa la differenza??

È stato utile?

Soluzione

  1. Top è la distanza dalla parte superiore dell'elemento html o, se questo si trova all'interno di un altro elemento con posizione assoluta, dalla parte superiore di quest'ultimo.

  2. & 3.Dipende dalla larghezza dell'immagine ma potrebbe servire per centrare l'immagine orizzontalmente (se la larghezza dell'immagine è 890px).Esistono però altri modi per centrare un'immagine orizzontalmente.Più comunemente, viene utilizzato per centrare verticalmente un blocco di altezza nota (questo è il modo più semplice per centrare verticalmente qualcosa di altezza nota):

    top: 50%
margin-top: -(height/2)px;

Altri suggerimenti

Questo probabilmente è stato fatto per centrare l'elemento sulla pagina (usando il metodo "punto morto" tecnica).

Funziona così:Supponendo che l'elemento sia largo 890 px, è impostato su position:absolute E left:50%, che posiziona il suo bordo sinistro nel centro del browser (beh, potrebbe essere il centro di qualche altro elemento con position:relative).

Quindi viene utilizzato il margine negativo spostare il bordo sinistro a sinistra una distanza pari a metà della larghezza dell'elemento, centrandolo così.

ovviamente, questo potrebbe non centrarlo esattamente (dipende da quanto è largo effettivamente l'elemento, non c'è width nel codice che hai incollato, quindi è impossibile esserne sicuri) ma sicuramente sta posizionando l'elemento rispetto al centro della pagina

in alto è come l'imbottitura in alto a destra?

Sì, la parte superiore della pagina.

cosa fa il 50% rimasto?

Sposta il contenuto al centro dello schermo (il 100% sarebbe completamente a destra).

perché il margine sinistro è a -445px?

Dopo averlo spostato con "sinistra:50%", questo lo sposta di 445 pixel indietro a sinistra.

Lo snippet sopra si riferisce a un elemento (potrebbe essere un div, span, immagine o altro) con un ID di sezione.

L'elemento ha un'immagine di sfondo blah.png che si ripeterà in entrambe le direzioni x e y.

Il bordo superiore dell'elemento sarà posizionato a 0px (o qualsiasi altra unità) dalla parte superiore del suo elemento genitore se anche il genitore è posizionato in modo assoluto.Se il genitore è la finestra, sarà sul bordo superiore della finestra del browser.

L'elemento avrà il bordo sinistro posizionato al 50% dalla sinistra del bordo sinistro dell'elemento genitore.

L'elemento verrà quindi "spostato" di 445 px a sinistra dal punto del 50%.

Scoprirai tutto ciò che devi sapere leggendo il Modello a scatola CSS

Quando la posizione è assoluta, top è la distanza verticale dal genitore (probabilmente il tag body, quindi 0 è il bordo superiore della finestra del browser).Il 50% sinistro è la distanza dal bordo sinistro.Il margine negativo lo sposta indietro a sinistra di 445 px.Quanto al motivo, la tua ipotesi è buona quanto la mia.

A rischio di sembrare Capitan Ovvio, proverò a spiegarlo nel modo più semplice possibile.

Top è un numero che determina il numero di pixel che vuoi che sia DALL'inizio di qualunque elemento html sia sopra di esso...quindi non necessariamente nella parte superiore della pagina.Fai attenzione alla formattazione html mentre progetti il ​​tuo CSS.

La tua sinistra al 50% dovrebbe spostarlo al centro dello schermo, dato che è 50.Tieni presente che le persone hanno dimensioni dello schermo diverse e che è allocato nella parte (0,0) in alto a sinistra dell'immagine, non al centro dell'immagine, quindi non sarà perfettamente allocato al centro dello schermo come potresti aspettarti .

QUESTO è il motivo per cui viene utilizzato il margine sinistro a -445 pixel: per spostarlo più avanti, fisso.

Buona fortuna, spero che questo avesse senso.Stavo cercando di formulare la mia spiegazione in modo diverso nel caso in cui altre risposte ti rendessero ancora difficile.Erano anche ottime risposte.

(Se hai due monitor di dimensioni diverse, ti suggerisco di giocare con il codice per vedere come ciascuna modifica influisce su schermi di dimensioni diverse!)

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top