Posizione relativa vs assoluta?

Qual è la differenza tra position: relativee position: absolutein CSS? E quando dovresti usare quale?

Posizionamento CSS assoluto

position: absolute;

Il posizionamento assoluto è il più facile da capire. Si inizia con la positionproprietà CSS :

position: absolute;

Questo dice al browser che qualunque cosa verrà posizionata dovrebbe essere rimossa dal normale flusso del documento e collocata in una posizione esatta sulla pagina. Non influirà sul modo in cui gli elementi prima o dopo di esso nell'HTML vengono posizionati sulla pagina Web, tuttavia sarà soggetto al posizionamento dei genitori a meno che non venga ignorato.

Se si desidera posizionare un elemento a 10 pixel dalla parte superiore della finestra del documento, utilizzare l' topoffset su di positionesso con il absoluteposizionamento:

position: absolute;
top: 10px;

Questo elemento verrà quindi sempre visualizzato 10pxdalla parte superiore della pagina indipendentemente dal contenuto che attraversa, sotto o sopra l'elemento (visivamente).

Le quattro proprietà di posizionamento sono:

1. top
2. right
3. bottom
4. left

Per usarli, devi pensarli come proprietà di offset. In altre parole, un elemento posizionato right: 2pxnon viene spostato a destra 2px. Il suo lato destro è sfalsato dal lato destro della finestra (o dalla sua posizione che sovrasta il genitore) di 2px. Lo stesso vale per gli altri tre.

Posizionamento relativo

position: relative;

Il posizionamento relativo utilizza le stesse quattro proprietà di absoluteposizionamento del posizionamento. Ma invece di basare la posizione dell'elemento sulla porta di visualizzazione del browser, inizia da dove sarebbe l'elemento se fosse ancora nel flusso normale .

Ad esempio, se nella pagina Web sono presenti tre paragrafi e il terzo presenta uno position: relativestile, la sua posizione verrà spostata in base alla posizione corrente, non dai lati originali della porta di visualizzazione.

Paragrafo 1.

Paragrafo 2

Appunti:

• il valore predefinito widthdi un elemento che è posizionato in modo assoluto è la larghezza del contenuto al suo interno, a differenza di un elemento che è relativamente posizionato dove esso è predefinito widthè 100%dello spazio può riempire.

• Puoi avere elementi che si sovrappongono con elementi posizionati in modo assoluto, mentre non puoi farlo con elementi posizionati relativamente (nativamente, cioè senza l'uso di margini / posizionamento negativi)

molti estratti da: questa risorsa

Sia il posizionamento "relativo" che "assoluto" sono realmente relativi, solo con una struttura diversa. Il posizionamento "assoluto" è relativo alla posizione di un altro elemento che racchiude. Il posizionamento "relativo" è relativo alla posizione che l'elemento stesso avrebbe senza posizionamento.

Dipende dalle tue esigenze e obiettivi quale usi. La posizione "relativa" è adatta quando si desidera spostare un elemento dalla posizione che altrimenti avrebbe nel flusso di elementi, ad esempio per far apparire alcuni caratteri in una posizione in apice. Il posizionamento "assoluto" è adatto per posizionare un elemento in un sistema di coordinate impostato da un altro elemento, ad esempio per "sovrastampare" un'immagine con del testo.

Come speciale, usa il posizionamento "relativo" senza spostamento (solo impostazione position: relative) per trasformare un elemento in una cornice di riferimento, in modo da poter utilizzare il posizionamento "assoluto" per gli elementi che sono al suo interno (nel markup).

Un'altra cosa da notare è che se si desidera che un elemento assoluto sia limitato a un elemento padre, è necessario impostare la posizione dell'elemento padre su relativa. Ciò manterrà l'elemento figlio contenuto all'interno dell'elemento padre e non sarà "relativo" all'intera finestra.

Ho scritto un post sul blog che fornisce un semplice esempio che crea il seguente effetto:

Quello ha un div verde che è assolutamente posizionato sul fondo del div giallo genitore.

1 http://blog.troygrosfield.com/2013/02/11/working-with-css-positions-creating-a-simple-progress-bar/

Posizione relativa:

Se si specifica position: relative, è possibile utilizzare la parte superiore o inferiore e sinistra o destra per spostare l'elemento rispetto al punto in cui si verificherebbe normalmente nel documento.

Posizione assoluta:

Quando si specifica position: absolute, l'elemento viene rimosso dal documento e posizionato esattamente dove gli si dice di andare.

Ecco un buon tutorial http://www.barelyfitz.com/screencast/html-training/css/positioning/ con l'utilizzo di esempio di entrambe le posizioni rispetto al posizionamento assoluto e relativo.

Relativo: relativo alla sua posizione corrente, ma può essere spostato. Oppure un elemento posizionato RELATIVO viene posizionato rispetto a ITSELF.

Assoluto: un elemento posizionato ASSOLUTO è posizionato rispetto al GENITORE POSIZIONATO PIÙ VICINO. se uno è presente, allora funziona come fisso ..... rispetto alla finestra.

<div style="position:relative"> <!--2nd parent div-->
    <div>   <!--1st parent div-->
        <div style="position:absolute;left:10px;....."> <!--Middle div-->
          Md. Arif
       </div>
    </div>
</div>

Qui, la divposizione del 2o genitore è relativa, quindi il centro divcambierà la sua posizione rispetto al 2o genitore div. Se la divposizione del 1o genitore fosse relativa, il Medio divcambierebbe la sua posizione rispetto al 1o genitore div. Dettagli

Dare una risposta, poiché la mia reputazione non è abbastanza per commentare. Ma non guardare a questa come una risposta, solo un'informazione aggiuntiva, come me, ha avuto alcuni problemi sia con il piè di pagina, sia con il posizionamento.

Durante l'impostazione della pagina, in modo che il mio piè di pagina rimanga sempre in fondo, con posizione assoluta, e contenitore / wrapper principale con posizione relativa.

Ho quindi riscontrato alcuni problemi con il mio contenuto di testo e un menu all'interno dello stesso contenuto (parte bianca della pagina tra intestazione e piè di pagina), quando li ho impostati su assoluti, il piè di pagina non rimane più inattivo.

Il posting è, come dici tu, un tema complesso.

La mia soluzione, per il contenuto che volevo in posizione "assoluta" nella mia pagina web, e non essere spinto di lato, quando ad esempio aprendo un menu a discesa, era di dargli effettivamente un post relativo e metterlo 35em sotto il mio menu a discesa menù. (35em è l'apice del mio menu a discesa, quando completamente esteso)

Quindi, in alto: -35em, per il contenuto che prima era stato spostato di lato. E poi aggiungendo margine inferiore: -35em. In questo modo, il contenuto è "sotto" il mio menu a discesa, ma visivamente è affiancato al mio menu a discesa! E lo spazio bianco in basso fino al piè di pagina, ha solo un margine di 10em, come era prima di iniziare a giocare con questo. Quindi la mia soluzione a questo era così:

 html, body {
    margin:0;
    padding:0;
    height:100%;

}
h1 {
    margin:0;
}
    #webpage {
    position:relative;
    min-height:100%;
    margin:0;
    overflow:auto;
}
     #header {
    height:5em;
    width:100%;
    padding:0;
    margin:0;
}
     #text {
    position:relative;
   margin-bottom:-32em;
    padding-top:2em;
    padding-right:2em;
    padding-bottom:10em;
    background-repeat:no-repeat;
    width:70%;
    padding-left:auto;
    margin-left:auto;
    margin-right:auto;
    right:10em;
    float:right;
    top:-32em;
      }
#dropdown {

position:absolute;
    left:0;
    width:20%;
    clear:both;
    display:block;
    position:relative;
    top:1em;
    height:35em;

}
    #footer {
    position:absolute;
    width:100%;
    right:0;
    bottom:0;
    height:5em;
    margin:0;
     margin-top:5em;
}

Vedo che la tua domanda ha una risposta soddisfacente, ma dopo un sacco di problemi ho scoperto che questa è un'ottima soluzione e un modo per capire meglio come funziona il posizionamento .. Quando inserisco il mio contenuto di testo, sotto il mio menu a discesa, non lo fa ' Spingi il mio testo di lato. Se ho modificato il testo in posizione assoluta, il piè di pagina non è rimasto in posizione. Come posso credere che questo sia un problema per più persone di me, lo aggiungo qui. Ciò che in effetti accade è che ho messo il testo, 35ems, sotto il mio menu a discesa.

Quindi, l'ho messo visivamente vicino l'uno all'altro, con la relativa posizione e in alto: -35em; e sera l'enorme spazio sottostante, con margine: -35em;

valori negativi sono sottovalutati a volte, ottima funzionalità, quando si capiscono meglio queste posizioni!

Naturalmente, anche la posizione fissa sembrava logica per il mio piè di pagina, ma voglio davvero che il piè di pagina vada sotto il riquadro di visualizzazione, se il testo o il contenuto è più lungo del riquadro di visualizzazione. E per rimanere in fondo, se c'è poco contenuto nella pagina.

Questo setupp è stato risolto molto bene e ricorda di usare 'em', non 'px' per un layout di pagina più fluido / dinamico! :)

(potrebbero esserci soluzioni migliori, ma questo funziona per me tra piattaforme e dispositivi).

Relativo vs assoluto:

• Differenza: relativa a se stessa, relativa all'antenato posizionato più vicino.
• Differenza: altri elementi che la circondano onorano la sua vecchia esistenza, altri elementi che la circondano NON onorano la sua vecchia esistenza.
• Somiglianza: altri elementi che lo circondano NON onorano la sua nuova esistenza, Altri elementi che lo circondano NON onorano la sua nuova esistenza.

Discutiamo uno scenario per spiegare la differenza tra assoluto e relativo.

All'interno dell'elemento body dire che hai un elemento header che ha un'altezza pari al 95% dell'altezza della vista, cioè 95vh. All'interno di questo contenitore hai posizionato un'immagine e ridotto la sua opacità per dire 0,5. E ora vuoi posizionare un'immagine del logo vicino all'angolo in alto a sinistra. Spero tu abbia capito lo scenario. Avrai quindi un'immagine più chiara nella sezione dell'intestazione con un logo nella parte superiore nella posizione specificata.

Ma prima di iniziare, ho impostato il margine e il padding su 0 in questo modo

*{
   margin:0px;
   padding:0px;
   box-sizing: border-box; 
}

Ciò garantisce che non vengano applicati margini e margini predefiniti agli elementi.

In questo modo puoi soddisfare le tue esigenze in due modi.

Primo modo

• si dà una classe all'immagine dire logo.

• in css scrivi

  .logo{ float:left; margin-top:40px; margin-left:40px; }

• questo posizionava il logo a 40px dalla parte superiore e sinistra del genitore che racchiude l'intestazione. L'immagine apparirà come se fosse posizionata come desiderato.

Ma amico mio, questo è un cattivo design da posizionare un'immagine che hai inutilmente consumato così tanto spazio, dandole un po 'di margine quando non era necessario. Tutto ciò che serve è posizionare l'immagine in quella posizione. L'hai gestito ammortizzandolo con i margini intorno. Il margine ha preso spazio e ha spinto il suo contenuto in profondità, dando l'impressione che sia posizionato esattamente dove volevi. Spero che tu abbia capito il problema risolvendolo in questo modo. Stai occupando più spazio del necessario per posizionare solo un'immagine nella posizione desiderata.

Ora proviamo un approccio diverso.

Secondo modo

• l'immagine con la classe logo è all'interno dell'elemento header con la diciamo classe header. Quindi la classe genitore è intestazione e la classe figlio è logo come prima.

• imposti la proprietà position della classe header su relative in questo modo

  .header{ position: relative; }

• quindi hai aggiunto le seguenti proprietà alla classe logo

  .logo{ position:absolute; top:40px; left:40px }

Ecco qua Hai posizionato l'immagine esattamente nello stesso posto. Non ci sarà alcuna differenza apparente nel posizionamento ad occhio nudo tra il primo approccio e il secondo approccio. Ma se controlli l'elemento immagine, scoprirai che non ha preso spazio extra. Occupa esattamente la stessa area tanto quanto la sua larghezza e altezza.

Quindi come è possibile? Ho detto alla classe del logo dell'immagine che verrai collocato rispetto alla classe dell'intestazione poiché sei il figlio di questa classe e che ho specificamente menzionato la sua posizione come relativa . In modo che qualsiasi figlio di esso verrà posizionato rispetto all'angolo in alto a sinistra. E che la tua posizione deve essere riparata all'interno di questo elemento genitore. quindi ti viene dato assoluto. E che devi spostarti un po 'dall'alto e lasciarlo nella posizione che voglio che tu sia. Quindi ti viene data la proprietà top e left con 40px come valore. In questo modo verrai posizionato solo rispetto al tuo genitore. Quindi, se domani muovo il tuo genitore su o giù o semplicemente ovunque, sarai sempre 40px in alto e a sinistra nell'angolo in alto a sinistra dell'intestazione del tuo genitore. Quindi la tua posizione viene fissata all'interno del tuo genitore, indipendentemente dal fatto che la posizione del tuo genitore sia fissa o meno in futuro (poiché non è assoluta come te).

Quindi usa rispettivamente relativo e assoluto per genitore e figlio. Secondariamente usalo quando vuoi posizionare l'elemento figlio solo in una posizione all'interno del suo elemento genitore. Non utilizzare riempitivi come i margini per spingerlo forzatamente. Dai il valore relativo principale e figlio che vuoi spostare, il valore assoluto. Specifica la proprietà superiore, inferiore sinistra o destra della classe figlio per posizionarla all'interno del genitore ovunque desideri.

Grazie.

Marco Pellicciotta: La posizione dell'elemento all'interno di un altro elemento può essere relativa o assoluta, rispetto all'elemento all'interno.

Se devi posizionare l'elemento nel punto di vista della finestra del browser, è meglio usare position: fixed