Quali sono i valori sinistro e superiore di un elemento e il suo elemento figlio se entrambi hanno position: absolute

Question

ho questo html, dove la posizione dell'elemento è assoluta, ma lasciato & top sono auto:

<div style="position:absolute; width:100px; height:100px;"> 
    <span style="position:absolute;">Test child</span> 
</div> 

mi sento che la parte superiore sinistra & per lo intervallo sarebbe 0 px, ma non è stato possibile decifrare sicuramente dalle specifiche o da altri post.

Quindi, se non ha specificato sinistra & superiore per l'elemento di posizionamento assoluto il cui genitore è anche posizionato in modo assoluto & ha nessun margine, o padding, la sinistra e in alto sarebbero 0px, E 'corretto secondo le specifiche CSS?

Inoltre nello stesso caso, come sopra, ma in modalità di scrittura top-to-bottom & da sinistra a destra modalità di scrittura, la parte superiore destra & sarebbe 0px, giusto?

Modifica: Per rendere più chiaro, intendevo la sinistra & in alto sarebbe 0px, 0px rispetto al div padre. O è al di sopra equivale a:

<div style="position:absolute; width:100px; height:100px;"> 
    <span style="position:absolute;left:0px;top:0px">Test child</span> 
</div> 

Grazie

Answer 1

Innanzitutto, è necessario notare che i valori iniziali per superiore, sinistra, destra e inferiore sono auto e non 0. Vedere section 9.3.2 of the specs

Così alla domanda:

se non ha specificato sinistra & superiore per posizionamento assoluto elemento il cui genitore è anche posizionato in modo assoluto & ha nessun margine, o padding, la sinistra e in alto sarebbe 0px, è corretto secondo le specifiche css ?

La risposta è no, questo non è corretto. Nel tuo esempio, è vero perché l'elemento figlio è posizionato lì nel flusso del documento (anche senza alcuna posizione positiva).

Come si può vedere in questo esempio:

<div style="position:absolute; width:100px; height:100px;"> 
 
    Some text 
 
    <span style="position:absolute;">Test child</span> 
 
</div>

L'unico effetto posizionamento assoluto ha in questo caso è quello di prendere l'elemento fuori dal flusso ma rimane nella sua posizione originale .

Answer 2

Se non c'è genitore con la posizione impostata relativa, e di impostare la posizione di assoluta, che interesseranno il vostro elemento per ottenere una posizione da x (0) y (0) (angolo superiore sinistro dello schermo), se si imposta per esempio 2 div, il primo è con position:relative e il figlio è con posizione: assoluto; ,, quell'elemento figlio sarà influenzato da x (0), y (0) dalla sua posizione genitore.

<div style="position:absolute;">One</div> <-- this one will be on the left top of the screen , 

    <div style="position:relative;"> 
     <div style="position:absolute;">Here you go boy</div> 
    </div> 

(this children element gets the position of its parent element , not of the top-left screen) 

Nel vostro caso, avete impostato per entrambi gli elementi (div e span) position:absolute, se non c'è nessun elemento genitore con position:relative; si va automaticamente nell'angolo in alto a sinistra e viene lasciato (0) superiore (0). Se vuoi che il tuo elemento span erediti la posizione di div, devi prima impostare position:relative; sul tuo div e position:absolute; , Per la durata della, e dopo che si deve regolare i pixel sinistro e superiore, in dipende da dove il vostro elemento vuole essere posizionato, c'è un semplice codice qui sotto

============ ======================

PRIMO CASO: NESSUNA EREDITÀ DEL POSIZIONAMENTO! HTML

<div> 
    <span>Test child</span> 
</div> 

CSS

div{ 
    height:100px; 
    width:100px; 
    border:2px solid black; 
    margin:0 auto; 
} 

span{ 
    position:absolute; 
    left:0px; 
    top:0px; 
} 

In questo codice, ho posizionato il tuo div al centro, da (margin:0 auto) .I've impostato position:absolute al vostro arco e left:0 , top:0, (non c'è alcuna eredità, perché div non contiene position:relative;).

=============================

SECONDO CASO - Trasmissione

CSS:

div{ 
     height:100px; 
     width:100px; 
     border:2px solid black; 
     margin:0 auto; 
     position:relative; /* from since now , your span will be affected of div's position */ 
    } 

    span{ 
     position:absolute; 
     left:0px; 
     top:0px; 
    } 

Ora la tua span è influenzata dalla posizione di div e verrà posizionata sull'angolo x (0) ey (0) nel div, non sullo schermo. Spero tu lo capisca.

Answer 3

Se un elemento con position: absolute ha un genitore con una posizione statica nessuno, come absolute, relative ecc userà che i genitori sinistra/superiore come punto di partenza, e se non, è la posizione successiva i genitori, e così via , che decide fino a raggiungere l'elemento del corpo.

Se il corpo, come nel suo caso, il div partirà dal body 'margine di s, il span al div' s left/top, e sotto frammenti mostrano come funziona.

Più di lettura/spec qui: https://developer.mozilla.org/en-US/docs/Web/CSS/left

body { 
 
    margin: 30px; 
 
} 
 
div { 
 
    position:absolute; 
 
    width:100px; 
 
    height:100px; 
 
    background-color: lime; 
 
} 
 
span { 
 
    position:absolute; 
 
}

<div> 
 
    <span>Test child</span> 
 
</div>

Answer 4

Il valore di default a sinistra e superiori sono 0 per la durata ho usato sinistra e in alto all'interno div genitore per arco è possibile rimuovere top e sinistra per vedere l'elemento nell'angolo in alto a sinistra rimuovi

#testChild { 
top:50px; 
left:10px; 
} 

dopo aver rimosso questo parte si può sicuramente sapere che di default a sinistra e sopra sono zero

https://jsfiddle.net/amarmagar17/op1nLep5/#

Answer 5

Mentre è vero che, come sottolinea @Nasco, un elemento position ndr si riferisce al suo genitore se genitore è position Ed pure, doesn 't deve essere relative, questo è vero per qualsiasi position ing, oltre a statico (spec). Questo cambia il riferimento per top-bottom-left-right, ma non i valori.

Questo small fiddle dimostra che un elemento con position:absolute non ha alcun trattamento speciale coordinate, cioè esso rimane afflusso, come se si ha position:relative;top:0;left:0; (che sarebbe right:0; in un contesto RTL). Puoi vedere questo in modo particolarmente chiaro nella sezione Test2.

Chrome devTools non mostra nemmeno top o left su proprietà calcolate.

Tuttavia, position:absolute ha altre implicazioni, come ignorare il blocco del genitore. Ciò succede indipendentemente, come si vede nella sezione Test1.

BTW, potete vedere nel link qui sopra che fixed(a subcategory of absolute) venga particolare attenzione, a quanto pare reso fuori dallo schermo (Test5Fixed) a meno che dato un attributo di alto-basso.destra-sinistra agisce come sopra (Test3Fixed)

Impossibile vedere nulla nelle specifiche su di esso, quindi potrebbe essere dipendente dal browser.