Differenza tra style = "position: absolute" e style = "position: relative"

103

Qualcuno può dirmi la differenza tra style = "position:absolute"e style = "position:relative" e come differiscono nel caso in cui lo aggiungo a div/ span/ inputelementi?

Sto usando in absolutequesto momento, ma voglio anche esplorare relative. Come cambierà il posizionamento?

css css-position

— Varun
fonte

1

La proprietà 'position' nei CSS 2.1.

— Josh Lee

@rolfl Hm, questa modifica era davvero necessaria su una domanda di 3 anni? L'avrei definito "troppo minore".

— Mr Lister

3

@MrLister È venuto fuori in una coda di revisione di "modifica suggerita" .... Non ho notato l'età. Ma se fosse una vecchia domanda di 60 secondi, avrebbe fatto la differenza?

— rolfl

@rolfl Non proprio; Avrei comunque votato "troppo minore".

— Mr Lister

178

Posizionamento assoluto significa che l'elemento viene tolto completamente dal normale flusso del layout di pagina. Per quanto riguarda il resto degli elementi nella pagina, l'elemento assolutamente posizionato semplicemente non esiste. L'elemento stesso viene quindi disegnato separatamente, una sorta di "sopra" a tutto il resto, nella posizione specificata utilizzando gli left, right, top and bottomattributi.

Utilizzando la posizione specificata con questi attributi, l'elemento viene quindi posizionato in quella posizione all'interno del suo ultimo elemento predecessore che ha un attributo di posizione diverso da static(gli elementi della pagina vengono impostati di default su statico quando non è specificato alcun attributo di posizione) o il corpo del documento (browser viewport) se tale antenato non esiste.

Ad esempio, se avessi questo codice:

<body>
  <div style="position:absolute; left: 20px; top: 20px;"></div>
</body>

... <div>sarebbe posizionato a 20px dalla parte superiore della finestra del browser e 20px dal bordo sinistro dello stesso.

Tuttavia, se ho fatto qualcosa del genere:

 <div id="outer" style="position:relative">
   <div id="inner" style="position:absolute; left: 20px; top: 20px;"></div>
 </div>

... allora il innerdiv sarebbe posizionato a 20px dalla parte superiore del outerdiv e 20px dal bordo sinistro dello stesso, perché il outerdiv non è posizionato con position:staticperché lo abbiamo impostato esplicitamente per l'uso position:relative.

Il posizionamento relativo, d'altra parte, è come non dichiarare alcun posizionamento, ma gli left, right, top and bottomattributi "spingono" l'elemento fuori dal loro normale layout. Il resto degli elementi sulla pagina vengono comunque disposti come se l'elemento fosse nella sua posizione normale.

Ad esempio, se avessi questo codice:

<span>Span1</span>
<span>Span2</span>
<span>Span3</span>

... allora tutti e tre gli <span>elementi si sarebbero seduti uno accanto all'altro senza sovrapporsi.

Se imposto il secondo <span>per utilizzare il posizionamento relativo, in questo modo:

<span>Span1</span>
<span style="position: relative; left: -5px;">Span2</span>
<span>Span3</span>

... allora Span2 si sovrapporrebbe al lato destro di Span1 di 5px. Span1 e Span3 si posizionerebbero esattamente nello stesso punto del primo esempio, lasciando uno spazio di 5 px tra il lato destro di Span2 e il lato sinistro di Span3.

Spero che questo chiarisca un po 'le cose.

— AgentConundrum
fonte

39

Posizionamento relativo: l'elemento crea i propri assi delle coordinate, in un offset di posizione rispetto all'asse delle coordinate della finestra. Fa parte del flusso di documenti ma è stato spostato.

Posizionamento assoluto: un elemento cerca gli assi coordinati disponibili più vicini tra i suoi elementi padre. L'elemento viene quindi posizionato specificando gli offset da questo asse di coordinate. Viene rimosso dal flusso normale del documento.

fonte

— Premraj
fonte

15

Ti consigliamo di dare un'occhiata a questo articolo sul posizionamento da "A List Apart". Ha aiutato a demistificare il posizionamento CSS (che mi sembrava folle, prima di questo articolo).

— jbrennan
fonte

8

Con il posizionamento CSS, puoi posizionare un elemento esattamente dove lo desideri sulla tua pagina.

Quando utilizzerai il posizionamento CSS, la prima cosa che devi fare è utilizzare la posizione della proprietà CSS per dire al browser se utilizzerai il posizionamento assoluto o relativo.

Entrambe le posizioni hanno caratteristiche diverse. In CSS Una volta impostata la posizione, puoi utilizzare gli attributi in alto, a destra, in basso, a sinistra.

Posizione assoluta

Un elemento di posizione assoluta è posizionato rispetto al primo elemento padre che ha una posizione diversa da statica.

Posizione relativa

Un elemento posizionato relativo è posizionato rispetto alla sua posizione normale.

Per posizionare un elemento relativamente, la posizione della proprietà è impostata come relativa. La differenza tra posizionamento assoluto e relativo è il modo in cui viene calcolata la posizione.

Altro: posizione relativa vs assoluta

— GowriShankar
fonte

6

OK, risposta molto ovvia qui ... fondamentalmente la posizione relativa è relativa all'elemento o alla finestra precedente, mentre l' assoluto non si preoccupa degli altri elementi a meno che non sia un genitore se usi alto e sinistro ...

Guarda l'esempio che creo per te per mostrare le differenze ...

Inoltre puoi vederlo in azione, usando il css che creo per te, puoi vedere come si comportano le posizioni assolute e relative:

.parent {
  display: inline-block;
  width: 180px;
  height: 160px;
  border: 1px solid black;
}

.black {
  position: relative;
  width: 100px;
  height: 30px;
  margin: 5px;
  border: 1px solid black;
}

.red {
  width: 100px;
  height: 30px;
  margin: 5px;
  top: 16px;
  background: red;
  border: 1px solid red;
}

.red-1 {
  position: relative;
}

.red-2 {
  position: absolute;
}

<div class="parent">
  <div class="black">
  </div>
  <div class="red red-1">
  </div>
</div>

<div class="parent">
  <div class="black">
  </div>
  <div class="red red-2">
  </div>
</div>

Espandi lo snippet

— Alireza
fonte

4

Il posizionamento assoluto si basa sulle coordinate del display:

position:absolute;
top:0px;
left:0px;

^ posiziona l'elemento in alto a sinistra nella finestra.

La posizione relativa è relativa al punto in cui è posizionato l'elemento:

position:relative;
top:1px;
left:1px;

^ posiziona l'elemento 1px verso il basso e 1px dalla sinistra di dove si trovava originariamente :)

— Damien-Wright
fonte

3

Parente:

Un elemento con position: relative;è posizionato rispetto alla sua posizione normale.
Se non aggiungi attributi di posizionamento (in alto, a sinistra, in basso o a destra) su un elemento relativo, non avrà alcun effetto sul suo posizionamento. Si comporterà esattamente come un position: staticelemento.
Ma se aggiungi qualche altro attributo di posizionamento, ad esempio top: 10px ;, sposterà la sua posizione di 10 pixel verso il basso rispetto a dove sarebbe normalmente.
Un elemento con questo tipo di posizionamento viene influenzato da altri elementi e esso stesso influenza anche gli altri.

Assoluto:

Un elemento con position: absolute;ti consente di posizionare qualsiasi elemento esattamente dove vuoi che sia. Si utilizzano gli attributi di posizionamento in alto, a sinistra, in basso. e destra per impostare la posizione.
È posizionato rispetto all'antenato non statico più vicino. Se non esiste un tale contenitore, viene posizionato rispetto alla pagina stessa.
Viene rimosso dal normale flusso di elementi sulla pagina.
Un elemento con questo tipo di posizionamento non è influenzato da altri elementi e inoltre non influisce sul flusso di altri elementi.

Vedere questo esempio autoesplicativo per una maggiore chiarezza. https://codepen.io/nyctophiliac/pen/BJMqjX

— Pransh Tiwari
fonte

0

Absolute posiziona l'oggetto (div, span, ecc.) In una posizione forzata assoluta (solitamente determinata in pixel) e relativa lo posizionerà a una certa distanza da dove sarebbe normalmente la sua posizione. Per esempio:

position: relative; sinistra: -20px;

Potrebbe far scomparire il lato sinistro del testo se si trovava entro 20 px dal bordo sinistro dello schermo.

— Charles Zink
fonte

0

position: absolute può essere posizionato ovunque e rimanere lì come 0,0.

position: relative viene posizionato con offset rispetto alla posizione in cui è stato originariamente posizionato nel browser.

— Vil Ignoble
fonte

0

posizione: atto relativo come elemento genitore position: atto assoluto un figlio di posizione relativa. puoi vedere l'esempio sotto

.postion-element{
   position:relative;
   width:200px;
   height:200px;
   background-color:green;
 }
.absolute-element{
  position:absolute;
  top:10px;
  left:10px;
  background-color:blue;
 }

— Imran Khan
fonte