Perché cambiare posizione in base all'opacità

Sto cercando di capire il posizionamento e rispetto allo absolute Ho un problema.Perché cambiare posizione in base all'opacità

Per quello che ho capito, gli elementi posizionati in modo assoluto sono stati completamente rimossi dal normale flusso di documenti. Per quanto riguarda gli elementi che li circondano, l'elemento assolutamente posizionato non esiste.

Quindi, sono posizionati in relazione al primo elemento padre che non ha position: static;. Se non esiste un elemento di questo tipo, l'elemento con posizione: assoluto viene posizionato rispetto a <html>.

Quindi qui ho creato un violino con 3 div diverse, ognuna con un solo colore. Tutti e tre hanno un'opacità di 0,5. ->https://jsfiddle.net/uwqoy4zh/

Quando ho creato il secondo div a position: absolute, egli viene rimosso dal flusso e quindi vedo quello rosa al suo posto ->https://jsfiddle.net/401ykurg/

Tuttavia, quando lo faccio esattamente la stessa cosa ma senza cambiare l'opacità, quella che viene rimossa dal flusso è quella rosa! ->https://jsfiddle.net/qnou6Lya/

Cosa non sto sottolineando?

Inoltre, posso vedere che nell'esempio funziona (dove rimuove quello giallo dal flusso) dove si trova effettivamente la posizione dietro a quella rosa, non il blu.

posso vedere questo quando si effettua il giallo un po 'più ampio ->https://jsfiddle.net/tszm65cu/

Se assolutamente posizionato sono posizionati in relazione al primo elemento genitore non ha che non ha position: static e quando non c'è tale elemento, l'elemento con position: absolute viene posizionato rispetto alla finestra del documento, perché non posiziona il div giallo sotto quello blu?

Il giallo non ha una cima o nulla, e poiché non vi è alcun elemento genitore con posizionamento assoluto, relativo o fisso applicato, dovrebbe posizionarlo in relatin alla finestra.

Perché è lì?

Grazie!

fonte

2015-12-17 New to this

L'opacità influisce sui valori dell'indice z .... potrebbe essere così. –

Vedere il contesto di impilamento in MDN: https: //developer.mozilla.org/it-it/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context –

http://philipwalton.com/articles/what-no-one-told-you-about-z-index/ –

opacità non sta influenzando la posizione.

Quando si posiziona il giallo div in posizione assoluta, indipendentemente dalla sua opacità, lo si rimuove dal flusso. Perché non stai affermando qualcosa come top: 0 e left: 0 oltre a questo, rimane dov'è.

Nel secondo violino, quello che sembra essere rimosso dal flusso di giallo è in realtà rosa e giallo che si fondono insieme poiché hanno il 50% di opacità. Il giallo è in alto e il rosa è sotto. Nel terzo violino, anche il giallo è in primo piano, ma poiché la sua opacità è al 100%, sembra che quella rosa sia stata rimossa dal flusso ma in realtà è al di sotto.

Si consiglia di esaminare più in z-index per controllare quale è in cima.

fonte

2015-12-17 17:47:06

Awww, ora ho capito! Grazie mille per la tua spiegazione e aiuto! –

Quando si utilizza la posizione: assoluta, si crea un contesto di impilamento. Per vedere l'elemento giallo dovrai usare z-index per impostare la priorità per la visualizzazione.

Poiché un elemento con opacità inferiore a 1 viene composta da una singola fuori campo immagine, contenuto al di fuori di esso non può essere stratificato in ordine z tra pezzi di contenuto all'interno di essa. Per lo stesso motivo, le implementazioni devono creare un nuovo contesto di stack per qualsiasi elemento con opacità minore di 1. Se un elemento con opacità minore di 1 è non posizionato, le implementazioni devono dipingere il livello che crea, all'interno del relativo contesto di stacking padre , nello stesso ordine di sovrapposizione che sarebbe stato utilizzato se fosse un elemento posizionato con 'z-index: 0' e 'opacità: 1'.Se un elemento con opacità inferiore a 1 è posizionato, la proprietà 'z-index' si applica come descritto in [CSS21], ad eccezione del fatto che 'auto' è considerato come '0' poiché un nuovo contesto di stack è sempre creato. Vedere la sezione 9.9 e l'Appendice E di [CSS21] per ulteriori informazioni sui contesti di stacking. Le regole in questo paragrafo non si applicano agli elementi SVG, poiché SVG ha il proprio modello di rendering ([SVG11], capitolo 3).

Scegli questa violino: https://jsfiddle.net/401ykurg/1/

opacity: 0.99; 
    z-index: 1;

Philip Walton ha scritto un bellissimo articolo su quella: http://philipwalton.com/articles/what-no-one-told-you-about-z-index/

fonte

2015-12-17 17:23:21

ama quell'articolo, condividilo tutto tempo! –

Nel tuo esempio, hai tre elementi div che sono tutti posizionati statically, che si riferisce al comportamento predefinito degli elementi di posizionamento. In breve, saranno posizionati esattamente come li hai disposti in HTML.

Un elemento posizionato in modo assoluto tuttavia verrà posizionato rispetto al suo elemento antenato non statico. Quindi, a meno che tu non abbia definito tale antenato, cosa che non hai fatto, l'elemento posizionato in modo assoluto cadrà rispetto al corpo e non influenzerà il posizionamento statico di altri elementi.

Quindi, che cosa ha a che fare con il tuo esempio? Nel tuo esempio hai a che fare con l'opacità. Pensa a cosa succede quando rendi trasparente un elemento di una certa percentuale, il che rende essenzialmente visibile un elemento visivo.

Quando si utilizza position: absolute su uno dei propri elementi, questo elemento viene spostato fuori dal flusso con gli altri elementi nella pagina. Nel tuo caso poiché tutte le dimensioni degli elementi sono le stesse, il comportamento predefinito dell'elemento posizionato in modo assoluto è di sedersi direttamente sotto (o sopra ...) gli elementi posizionati non assoluti. Ripensando alla tua opacità dato che entrambi gli elementi hanno trasparenza e colori di sfondo diversi; a causa della natura del colore che si sovrappone a un'altra, in sostanza si è creato un effetto di sovrapposizione del colore sovrapposto.

Quindi il tuo elemento di posizionamento assoluto div non scompare, si trova direttamente sotto una delle altre div posizionate in modo non assoluto. Comportamento divertente e funky ma è abbastanza chiaro da come si comporta il tuo elemento posizionato in modo assoluto.

fonte

2015-12-17 19:28:38 AGE

Perché cambiare posizione in base all'opacità

risposta

Problemi correlati