CSS Priorita' z-index e position?

[nostyn]

Ho cercato un po' in giro, ma le descrizioni su w3schools sono troppo scarne; dei thread su stackoverflow risalgono 2011, quindi per averne la certezza domando qui.

Se ho ben capito, il browser in automatico assegna la proprieta' z-index in questo modo:

...
<div> <!-- 1 -->
    <div> <!-- 1.1 -->
        <p id="here">foo</p> <!-- 1.1.1 -->
    </div>
    <p>bar</p> <!-- 1.2 -->
</div>
...

Io credo di aver capito (sicuramente male) che inserendo nel foglio di stile:
#here { postion: relative; z-index: -1; } risultato: z-index: 1.1.(-1)
#here { z-index: -1; } risultato: z-index: -1

Cioe' mi sembra di aver capito che la proprieta' position serva per ridefinire una sorta di "contesto" e che qualora non specificato eredita quello del genitore.

La mia domanda e': ho capito bene oppure ho frainteso completamente il significato delle due proprieta'?
E, nel caso avessi capito bene, il "contesto" di cui ho parlato, su quali altre proprieta' "principali" influisce?

 

[Utente cancellato 263979]

Ho cercato un po' in giro, ma le descrizioni su w3schools sono troppo scarne; dei thread su stackoverflow risalgono 2011, quindi per averne la certezza domando qui.

Se ho ben capito, il browser in automatico assegna la proprieta' z-index in questo modo:

...
<div> <!-- 1 -->
    <div> <!-- 1.1 -->
        <p id="here">foo</p> <!-- 1.1.1 -->
    </div>
    <p>bar</p> <!-- 1.2 -->
</div>
...

Io credo di aver capito (sicuramente male) che inserendo nel foglio di stile:
#here { postion: relative; z-index: -1; } risultato: z-index: 1.1.(-1)
#here { z-index: -1; } risultato: z-index: -1

Cioe' mi sembra di aver capito che la proprieta' position serva per ridefinire una sorta di "contesto" e che qualora non specificato eredita quello del genitore.

La mia domanda e': ho capito bene oppure ho frainteso completamente il significato delle due proprieta'?
E, nel caso avessi capito bene, il "contesto" di cui ho parlato, su quali altre proprieta' "principali" influisce?

z-index è quella proprietà che server a rendere "3d" la pagina, maggiore è lo z-index e più in superficie risulterà l'elemento, position invece è impostata di default su static, se viene impostata su relative l'elemento viene posizionato relativamente al suo contenitore, di solito si usa per spostare l'elemento con top, bottom, left, right

 

[nostyn]

z-index è quella proprietà che server a rendere "3d" la pagina, maggiore è lo z-index e più in superficie risulterà l'elemento

So cos'e' la z-index, quello che mi domando e' come viene assegnata e con quale criterio in relazione al position viene alterata.

se viene impostata su relative l'elemento viene posizionato relativamente al suo contenitore

Ti correggo: relative posiziona relativamente alla sua posizione originale. Credo tu abbia fatto confuzione con absolute.

 

[Utente cancellato 263979]

So cos'e' la z-index, quello che mi domando e' come viene assegnata e con quale criterio in relazione al position viene alterata.


Ti correggo: relative posiziona relativamente alla sua posizione originale. Credo tu abbia fatto confuzione con absolute.

Si, scusa

 

[_Daniele18]

Ciao,
provo a spiegarti quanto meglio possibile:

• La proprietà z-index indica la priorità di visualizzazione del componente html su cui è applicato rispetto al restante contenuto nella pagina. Di default questa proprietà è settata a 0, per cui i <tag> vengono visualizzati rispettando l'ordine di scrittura nel codice.
• La proprietà position indica appunto la posizione che deve assumente quel <tag> rispetto al documento o al <div> "container" ("il padre")

z-index è quella proprietà che server a rendere "3d" la pagina, maggiore è lo z-index e più in superficie risulterà l'elemento, position invece è impostata di default su static, se viene impostata su relative l'elemento viene posizionato relativamente al suo contenitore, di solito si usa per spostare l'elemento con top, bottom, left, right

Concordo con il fatto che maggiore è lo z-index, più in "superficie" risulterà l'elemento... ma il "modello 3d" non si costruisce sulla base dello z-index bensì su una buona progettazione del layout della pagina web.

So cos'e' la z-index, quello che mi domando e' come viene assegnata e con quale criterio in relazione al position viene alterata.


Ti correggo: relative posiziona relativamente alla sua posizione originale. Credo tu abbia fatto confuzione con absolute.

Tra i vari casi in cui si può utilizzare, quello che mi viene in mente in questo momento:

Ci sono due <div> scritti in maniera ordinata nel codice e senza aver settato la proprietà z-index ( il primo con position: fixed, il secondo con position: absolute). Per fare in modo che il secondo <div> abbia una priorità di visualizzazione maggiore rispetto al primo <div> occorre settare z-index > 0;

Il consiglio che ti posso dare è cercare di fare dei test su queste proprietà, è il solo e il migliore modo per capire bene.

 

[nostyn]

La proprietà z-index ... Di default questa proprietà è settata a 0, per cui i <tag> vengono visualizzati rispettando l'ordine di scrittura nel codice.

Lo so, tuttavia, so per certo che a parita' di z-index (ad esempio nel caso venga lasciato a 0) il livello "intrinseco" e' maggiore in base a dove compare il tag nel documento. Colpa mia, forse non mi sono espresso bene quando ho scritto il post:

...
<div> <!-- 1 -->
    <div> <!-- 1.1 -->
        <p id="here">foo</p> <!-- 1.1.1 -->
    </div>
    <p>bar</p> <!-- 1.2 -->
</div>
...

I commenti alludono al z-index "intrinseco", ovvero la priorita' con i quali verranno visualizzati, non quella effettiva che e' chiaramente 0.

Il consiglio che ti posso dare è cercare di fare dei test su queste proprietà, è il solo e il migliore modo per capire bene.

Infatti e' proprio per alcune prove che ho fatto su pagine con diversi livelli di div annidati che mi e' sorto questo dubbio: la proprieta' z-index alterava in modo completamente differente le posizioni rispetto al valore che assumema position ...

 

[_Daniele18]

Io non l'ho specificato, ma se si ha una serie di <div> disposti in maniera gerarchica, come nell'esempio che tu hai riportato, ovviamente lo z-index andrebbe settato al massimo sul <div> più esterno perché rispetto magari ad un altro componente nella pagina (non un suo "figlio") deve avere maggiore priorità di visualizzazione.
Quindi non ha senso mettere lo z-index sul tag <p> per esempio..

 

[nostyn]

Quindi non ha senso mettere lo z-index sul tag <p> per esempio..

Si tratta di un esempio a scopo illustrativo, tuttavia ti diro' che in realta' ho avuto situazioni in cui aveva senso una tale impostazione.

lo z-index andrebbe settato al massimo sul <div> più esterno

Ipotizziamo che io abbia questa gerarchia:

...
<div>
    <div id="X">
        <div id="Y">
            <div id="Z">
                 ...
            </div>
        </div>
    </div>
</div>
...

Lasciando le cose come sono, #Z verra' visualizzato sopra #Y, che a sua volta sara' sopra #X.
Poniamo il caso che io voglia inserire #Z tra #X e #Y. Come faresti?

 

[_Daniele18]

Si tratta di un esempio a scopo illustrativo, tuttavia ti diro' che in realta' ho avuto situazioni in cui aveva senso una tale impostazione.


Ipotizziamo che io abbia questa gerarchia:

...
<div>
    <div id="X">
        <div id="Y">
            <div id="Z">
                 ...
            </div>
        </div>
    </div>
</div>
...

Lasciando le cose come sono, #Z verra' visualizzato sopra #Y, che a sua volta sara' sopra #X.
Poniamo il caso che io voglia inserire #Z tra #X e #Y. Come faresti?

Nel mio primo messaggio ho detto che la cosa più giusta sarebbe quella di progettare correttamente il layout in base al risultato che si vuole ottenere.
In questo caso è sbagliato usare z-index. Devi solo disporre i <div> in maniera corretta.
Quindi prima #X, poi #Z ed infine #Y, non uno dentro l'altro.

 

[nostyn]

In questo caso è sbagliato usare z-index.

Ne sono consapevole, tu hai perfettamente ragione, tuttavia la semplificazione era voluta. Ti ripropongo dunque il medesimo esempio contestualizzandolo:

...
<div id="box">
    <div id="cornice">
        <p id="paragrafo"></p>
        ...
    </div>
    ...
</div>
...

Ipotizziamo che io voglia che #paragrafo vada sotto la #cornice (dal momento che questa ha delle zone trasparenti), e che allo stesso tempo #cornice contenga altri elementi che devono rimanere sopra di essa. Come fare?

 

[_Daniele18]

Ne sono consapevole, tu hai perfettamente ragione, tuttavia la semplificazione era voluta. Ti ripropongo dunque il medesimo esempio contestualizzandolo:

...
<div id="box">
    <div id="cornice">
        <p id="paragrafo"></p>
        ...
    </div>
    ...
</div>
...

Ipotizziamo che io voglia che #paragrafo vada sotto la #cornice (dal momento che questa ha delle zone trasparenti), e che allo stesso tempo #cornice contenga altri elementi che devono rimanere sopra di essa. Come fare?

Ci sono degli errori di progettazione in ciò che hai detto....

1. #cornice NON deve avere delle "zone" trasparenti;
2. #paragrafo non ha bisogno di "stare sotto" #cornice se il tuo obiettivo è visualizzarlo all'interno di questo.

Non ti posso dire come fare una cosa se già il design di partenza è errato.
E' sbagliato partire da un modello HTML, come il tuo esempio contestualizzato, se poi effettivamente devi modificare tramite CSS la struttura perchè la vorresti in un'altra maniera.... Non so se mi sono spiegato...
Il mio consiglio è iniziare a creare un design in HTML e CSS in base a come effettivamente vorresti disporre il contenuto.

 

[Dazorn]

La proprietà z-index, come dicevi, è utile per dare un'ordine sull'asse z agli elementi presenti in pagina, maggiore è il valore e più è in primo piano l'elemento rispetto ad altri con la stessa proprietà non valorizzata o minore. Inoltre, si applica agli elementi discendenti. Normalmente non la utilizzi quasi mai, in quanto il suo scopo è soprattutto di ordinare elementi concorrenti sulla stessa "porzione" di pagina e finché non utilizzi valori di position specifici non incontrerai mai questo problema.
Va anche detto che il browser di default non da un valore di z-index fisso per ogni elemento, in quanto gli elementi senza valori specifici di position seguono un flow di posizionamento standard, in cui gli elementi vengono disposti a cascata.

Parlando di position, permette di dare un contesto di appartenenza ad un elemento, ed ha tre valori ammissibili ed uno standard (non necessario da specificare):

• static, che è di default ed indica che l'elemento segue il flow standard degli elementi presenti in un pagina
• relative, simile a static e consente di utilizzare i valori di posizionamento aggiuntivi come top, left, right, bottom, z-index. Inoltre viene considerato come "contesto" dagli elementi figli
• absolute, consente di escludere un elemento dal flow standard e di dargli un posizionamento proprio rispetto al contesto (sempre con i valori di posizionamento visti prima). Va tenuto conto che se nessun elemento padre ha position diverso da static vede come suo padre la root del documento, cioè body
• fixed, simile ad absolute ma al suo contrario non riconosce nessun elemento come padre all'infuori del body, infatti torna molto utile per posizionare elementi che necessitano di restare in una posizione fissa della pagina (anche mentre si scrolla)

Ne sono consapevole, tu hai perfettamente ragione, tuttavia la semplificazione era voluta. Ti ripropongo dunque il medesimo esempio contestualizzandolo:

...
<div id="box">
    <div id="cornice">
        <p id="paragrafo"></p>
        ...
    </div>
    ...
</div>
...

Ipotizziamo che io voglia che #paragrafo vada sotto la #cornice (dal momento che questa ha delle zone trasparenti), e che allo stesso tempo #cornice contenga altri elementi che devono rimanere sopra di essa. Come fare?

Quello che vuoi fare è realizzabile, ma richiede un certo sforzo a livello di CSS. Dovresti dare a paragrafo un posizionamento relative, dopodichè impostare cornice come absolute e valorizzare le proprietà di posizionamento in maniera tale da posizionarla perfettamente nella zona trasparente di paragrafo. Ovviamente paragrafo dovrà avere un valore di z-index maggiore di cornice.

 

[nostyn]

#cornice NON deve avere delle "zone" trasparenti

Spiegati meglio, come mai questo "NON" categorico? Quel div ha una background-image che presenta una zona di trasparenza.

#paragrafo non ha bisogno di "stare sotto" #cornice se il tuo obiettivo è visualizzarlo all'interno di questo

Per dare un senso di tridimensionalita', all'interno di questo div si alternano zone di testo che sono al di sopra e al di sotto dello stesso.

... finché non utilizzi valori di position specifici ...

Alle volte mi capita e vorrei capire bene come gestire questo genere di situazioni senza andare a tentoni.

relative ... Inoltre viene considerato come "contesto" dagli elementi figli
absolute ... dargli un posizionamento proprio rispetto al contesto ... Va tenuto conto che se nessun elemento padre ha position diverso da static vede come suo padre la root del documento

Grazie mille, e' esattamente quello su cui volevo conferma!

@Dazorn , sai anche dirmi se la proprieta' z-index, quando la imposti, fa riferimento al "contesto" come il value absolute oppure ad un livello "globale"? Perche' utilizzandola ho riscontrato dei problemi che mi hanno fatto intuire che "lavori" un po' come absolute, ma potrei sbagliare.

@_Daniele18 , apprezzo il tuo consiglio di pensare prima di tutto a progettare in modo efficace , perche' nella maggior parte dei casi e' sufficiente per non trovarsi in queste situazioni. Tuttavia ho aperto il thread non per l'esigenza di applicare questa impostazione, quanto per comprendere il meccanismo con il quale il browser lavora su z-index e position. Ad ogni modo grazie anche a te per le dritte .