Perché la posizione di rendering assoluto sopra la posizione è statica?

Ho un semplice div assoluto e un altro div normale dietro. Perché il div assoluto è reso al di sopra dell'altro?Perché la posizione di rendering assoluto sopra la posizione è statica?

So che posso aggiustarlo con z-index - Ma qual è il motivo?

JSBIN: http://jsbin.com/yadoxiwuho/1

<style> 
    .with-absolute { 
     position:absolute; 
     top:0px; 
     bottom:0px; 
     background-color:red 
    } 
    .other { 
     background-color:yellow; 
    } 
    </style> 
    </head> 
<body> 
    <div class="with-absolute">Hello</div> 
    <div class="other">Why is this not on top? It comes last</div> 
</body>

fonte

2015-05-04 zolv

assoluta:

Ciò significa che si può mettere da nessuna parte, e non influenzerà o essere influenzato da qualsiasi altro elemento nel flusso.

A differenza dei valori statici e relativi, un elemento posizionato in modo assoluto viene rimosso dal flusso normale.

Ecco codice di esempio:

#box_1 { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 200px; 
    height: 200px; 
    background: #ee3e64; 
} 
#box_2 { 
    position: absolute; 
    top: 0; 
    right: 0; 
    width: 200px; 
    height: 200px; 
    background: #44accf; 
}

DEMO da autore documento di Noah Stokes.

Chiaramente qui è

fonte

2015-05-04 10:15:09 pcs

Vedere http://stackoverflow.com/help/referencing per assistenza sulla quotazione di fonti esterne. – BoltClock

grazie signore ... per vostra informazione. – pcs

assoluto L'elemento è posizionato rispetto alla sua prima posizione elemento (non statico) antenato

Reference.

Nel modello di posizionamento assoluto, una casella viene esplicitamente spostata con rispetto al relativo blocco contenitore. Viene rimosso completamente dal flusso normale (non ha alcun impatto sui fratelli successivi). Una casella posizionata in modo assoluto stabilisce un nuovo blocco contenitore per il flusso normale bambini e discendenti posizionati in modo assoluto (ma non fisso). Tuttavia, il contenuto di un elemento posizionato in modo assoluto non scorre attorno a nessun'altra casella. Possono oscurare il contenuto di un'altra casella (o essere oscurati) a seconda dei livelli di stack delle caselle sovrapposte .

Reference.

fonte

2015-05-04 10:12:49 odedta

Generalmente il valore predefinito per z-index di elementi assoluti è 0 che si trova sopra la posizione statica. Se vuoi spostarlo dietro, imposta lo z-index su -1.

fonte

2015-05-04 10:14:20

Wow, da quando ?? Ho programmato i css per 15 anni e non ho mai dovuto giocare con gli z-index. Gli elementi assoluti stavano mostrando secondo il flusso DOM. Se avessi due figli div, il primo assoluto, il secondo sarebbe in cima. –

Tutti gli elementi statici del NoèDOCUMENT sul posizionamento css Stokes hanno un indice z predefinito (auto), significato, zero.

unica spiegazione logica che ho è che quando si aggiunge position: relative|absolute|fixed ad un elemento, lo si inserisce al di fuori del flusso dei documenti, e per questo diventa un z-index di 1.

fonte

2015-05-04 10:15:50 LinkinTED

L'ordine vernice di elementi è determinata da CSS 2.1 spec, E.2 Painting order

elementi posizionati statica sono dipinte nei passaggi da 4 a 7. Absolute posizionato elementi con un indice z di 0 sono dipinte nel passaggio 8, quindi sono sempre in primo piano.

fonte

2015-05-04 10:34:37 Alohci

Grazie per aver effettivamente risposto a questa domanda. Mentre le altre risposte sembrano fornire informazioni corrette, non vedo come si riferiscono alla domanda – Danield

@Danield La domanda originale ha chiesto un _reason_. Questa risposta dice "solo perché!" –

Questa è l'unica risposta della domanda. – Nigiri

Perché la posizione di rendering assoluto sopra la posizione è statica?

risposta

Problemi correlati