In CSS, qual è la differenza tra il posizionamento statico (predefinito) e il posizionamento relativo?
Differenza tra posizionamento statico e relativo
Risposte:
Il posizionamento statico è il modello di posizionamento predefinito per gli elementi. Vengono visualizzati nella pagina in cui sono stati visualizzati come parte del normale flusso HTML. Elementi posizionati staticamente non obbediscono left, top, righte bottomregole:
Il posizionamento relativo consente di specificare un offset specifico ( left, topecc.) Relativo alla posizione normale dell'elemento nel flusso HTML. Quindi, se ho una casella di testo all'interno di una, divpotrei applicare il posizionamento relativo sulla casella di testo per visualizzarla in un punto specifico rispetto a dove sarebbe normalmente posizionata all'interno di div:
Esiste anche il posizionamento assoluto, in base al quale si specifica la posizione esatta dell'elemento rispetto all'intero documento o l'elemento successivo posizionato relativamente più in alto nell'albero degli elementi :
E quando a position: relativeviene applicato a un elemento genitore nella gerarchia:
Nota come il nostro elemento di posizione assoluta è vincolato dall'elemento posizionato relativamente.
E infine c'è fisso. Il posizionamento fisso limita un elemento a una posizione specifica nella finestra, che rimane in posizione durante lo scorrimento:
Puoi anche osservare il comportamento secondo cui gli elementi a posizionamento fisso non provocano lo scorrimento perché non sono considerati vincolati dalla finestra:
Mentre gli elementi posizionati in modo assoluto sono ancora vincolati dalla finestra e causeranno lo scorrimento:
..a meno che, naturalmente, l'elemento genitore non utilizzi overflow: ?per determinare il comportamento dello scorrimento (se presente).
Con il posizionamento assoluto e il posizionamento fisso, gli elementi vengono estratti dal flusso HTML.
Buona risposta, ma (per la posizione relativa) l'offset non è basato sulla posizione normale dell'elemento?
—
Baztoune
Sono d'accordo con Baztoune, questa definizione di elementi relativamente posizionati è fuorviante. A
—
Ryan Williams
staticed relativeelemento sono gli stessi, tranne che con quest'ultimo puoi riposizionarlo rispetto alla sua posizione originale , non all'elemento contenitore - ecco dove absoluteentra in gioco. Inoltre, come qualsiasi elemento posizionato utilizzando un valore diverso da quello staticche puoi usare z-index.
Ho rielaborato questa risposta per definire più accuratamente il posizionamento relativo e ho incluso immagini per dimostrare i diversi tipi di posizione.
—
Matthew Abbott
Mi chiedo perché CSS dovrebbe ancora implementarlo
—
cram2208
position: static;invece di sostituirlo semplicemente con position: relative;di default? Se uno non vuole posizionare un oggetto diverso da top: 0;e left: 0;allora non lo facciamo, giusto? C'è un motivo di fondo per cui position: static;è ancora richiesto come parte dei CSS?
@ cram2208 poiché relative fa sì che i nodi secondari posizionati in modo assoluto siano posizionati rispetto a loro, static consente agli elementi figlio con posizione assoluta di ignorare la loro posizione e di essere posizionati rispetto all'elemento posizionato relativo più vicino. È un concetto importante da avere
—
Felype
Puoi vedere una semplice panoramica qui: W3School
Inoltre, se ricordo bene, quando dichiari un elemento relativo, per impostazione predefinita rimarrà nello stesso posto come dovrebbe altrimenti, ma ottieni la possibilità di posizionare assolutamente gli elementi al suo interno relativamente a questo elemento, che ho trovato molto utile nel passato.
w3schools ... Non lo sottovaluterò ma devi convivere con la vergogna.
—
Myles Grey
Nel frattempo, nel 2017, W3Schools non è così male come una volta (non è ancora perfetto, ma hanno preso sul serio il contraccolpo della community e sono effettivamente migliorati).
—
Priidu Neemre
Nel frattempo, nel 2018, W3Schools non è ancora così male come una volta, ma mi dispiace per loro che la loro reputazione anche oggi è ancora tale che menzionare il primo commento di cui sopra ad altri sviluppatori, ottiene ancora una classica risatina ... indietro ai miei tempi ... W3School .... prime impressioni hey ...
—
redfox05
In risposta a "perché i CSS implementerebbero ancora position: static;" in uno scenario, usando position: relative per un genitore e position: absolute per il figlio limita la larghezza di ridimensionamento del figlio. In un sistema di menu orizzontale, dove potresti avere "colonne" di link, l'uso di "larghezza: auto" non funziona con i relativi genitori. In questo caso, cambiarlo in "statico" consentirà di variare la larghezza in base al contenuto all'interno.
Ho passato alcune ore buone a chiedermi perché non potevo regolare il mio contenitore in base alla quantità di contenuto al suo interno. Spero che sia di aiuto!
Questa è LA risposta! Tutti dicono ai professionisti solo per il posizionamento relativo, mancando il punto in una domanda come questa: qual è la differenza.
—
Bartis Áron
La posizione relativa consente di utilizzare la parte superiore / inferiore / sinistra / destra per il posizionamento. Statico non ti consente di farlo a meno che non utilizzi i parametri del margine. C'è una differenza tra Top e margin-top.
Non avrai bisogno di usare statico come è predefinito
La posizione relativa è relativa al flusso normale. La posizione relativa di quell'elemento (con offset) è relativa alla posizione in cui quell'elemento sarebbe stato normalmente se non fosse stato spostato.
Matthew Abbott ha un'ottima risposta.
Assoluto e gli elementi posizionati relativamente obbediscono top, left, righte bottomcomandi (offset) dove elementi statici posizionati non lo fanno.
Gli elementi posizionati in modo relativo spostano gli offset da dove sarebbero normalmente nell'html.
Gli elementi posizionati in modo assoluto spostano gli offset dal documento o dal successivo elemento posizionato relativamente in alto nell'albero DOM.
statico e relativo sono attributi di posizione. Relativo viene utilizzato per molti usi. Non per uno. Ma tieni presente che statico e relativo non danneggiano il normale flusso di documenti dell'Html. static è la posizione predefinita che si trova quando si scrive un elemento in Html. Se un elemento ha una posizione relativa, quell'elemento può essere posizionato rispetto alla sua posizione nativa. quando vuoi regolare l'elemento da piccoli spazi, usa la posizione relativa in modo da non dover aggiungere il margine, il padding ecc. se l'elemento ha una posizione relativa e ha un elemento figlio. Qui possiamo eseguire misurazioni relativamente al suo genitore. Se aggiungi larghezza 10% al figlio, ciò significa (larghezza + imbottitura) x10%. Ma non aggiungi la parola chiave relativa, ottieni larghezzax10%. Oltre a questo, l'uso più importante del parente è; puoi posizionare qualsiasi elemento sopra di esso.
position: relativee non scrivi maiposition: static:)