Comments on: Le merdier du “stacking context” en CSS (aka “pourquoi mon z-index marche pas bordel de merde” ?) http://sametmax.com/le-merdier-du-stacking-context-en-css-aka-pourquoi-mon-z-index-marche-pas-bordel-de-merde/ Deux développeurs en vadrouille qui se sortent les doigts du code Wed, 05 Feb 2014 12:15:31 +0000 hourly 1 http://wordpress.org/?v=3.3.1 By: Greg http://sametmax.com/le-merdier-du-stacking-context-en-css-aka-pourquoi-mon-z-index-marche-pas-bordel-de-merde/#comment-4951 Greg Tue, 08 Jan 2013 21:03:38 +0000 http://sametmax.com/?p=3499#comment-4951 En fait c'est un sacre bordel et j'y vais aussi de mon lien, qui m'avait aide a mieux comprendre (mais en anglais): https://developer.mozilla.org/en-US/docs/CSS/Understanding_z-index En fait c’est un sacre bordel et j’y vais aussi de mon lien, qui m’avait aide a mieux comprendre (mais en anglais):
https://developer.mozilla.org/en-US/docs/CSS/Understanding_z-index

]]> By: Sam http://sametmax.com/le-merdier-du-stacking-context-en-css-aka-pourquoi-mon-z-index-marche-pas-bordel-de-merde/#comment-4914 Sam Mon, 07 Jan 2013 18:42:35 +0000 http://sametmax.com/?p=3499#comment-4914 Merci pour ces compléments d'information à tous les deux. C'est très utile. Merci pour ces compléments d’information à tous les deux. C’est très utile.

]]> By: le hollandais volant http://sametmax.com/le-merdier-du-stacking-context-en-css-aka-pourquoi-mon-z-index-marche-pas-bordel-de-merde/#comment-4913 le hollandais volant Mon, 07 Jan 2013 18:24:33 +0000 http://sametmax.com/?p=3499#comment-4913 @MatTheCat +0.5 Si ton <em>.child</em> est en position:relative (ou <code>absolute</code>, <code>fixed</code>), alors ça marche (suffit de tester avec des <code>background</code> semi-transparents). <blockquote>Donc si, z-index a un effet même sur un élément dont le parent a aussi un z-index.</blockquote> Tout dépend : si <em>.child</em> et <em>.parent</em> ont chacun des <code>position:relative</code>, alors là le <em>.child</em> ne pourra pas se placer sous le <em>.parent</em>. Donc en gros, si le <em>.parent</em> a un <code>position:relative</code>, alors le <code>z-index</code> du <em>.child</em> n’a d’effets que sur les autres <em>.child</em> (donc les éléments frères et sœurs, si vous voulez). <blockquote>z-index n’a d’effet sur l’élément que dans la pile à laquelle il appartient</blockquote> C’est bien ça, si la pile possède un <code>position</code> différent de <code>static</code>. @MatTheCat +0.5

Si ton .child est en position:relative (ou absolute, fixed), alors ça marche (suffit de tester avec des background semi-transparents).

Donc si, z-index a un effet même sur un élément dont le parent a aussi un z-index.

Tout dépend : si .child et .parent ont chacun des position:relative, alors là le .child ne pourra pas se placer sous le .parent.

Donc en gros, si le .parent a un position:relative, alors le z-index du .child n’a d’effets que sur les autres .child (donc les éléments frères et sœurs, si vous voulez).

z-index n’a d’effet sur l’élément que dans la pile à laquelle il appartient

C’est bien ça, si la pile possède un position différent de static.

]]> By: Sam http://sametmax.com/le-merdier-du-stacking-context-en-css-aka-pourquoi-mon-z-index-marche-pas-bordel-de-merde/#comment-4911 Sam Mon, 07 Jan 2013 17:57:47 +0000 http://sametmax.com/?p=3499#comment-4911 Ouai, on sent que mon expertise est bien moindre en front end, mes articles sont beaucoup plus approximatif. Bah, c'est pas grâve, y toujours quelqu'un pour donner tous les détails en comment. Ouai, on sent que mon expertise est bien moindre en front end, mes articles sont beaucoup plus approximatif. Bah, c’est pas grâve, y toujours quelqu’un pour donner tous les détails en comment.

]]> By: MatTheCat http://sametmax.com/le-merdier-du-stacking-context-en-css-aka-pourquoi-mon-z-index-marche-pas-bordel-de-merde/#comment-4910 MatTheCat Mon, 07 Jan 2013 17:52:22 +0000 http://sametmax.com/?p=3499#comment-4910 Ah en fait ce que vous voulez mettre en avant c'est le fait que <code>z-index</code> n'a d'effet sur l'élément que dans la pile à laquelle il appartient (<a href="http://www.quirksmode.org/bugreports/archives/2006/01/Explorer_z_index_bug.html" rel="nofollow">sauf exception !</a>) ? Honnêtement je n'ai pas compris ça en lisant l'article =/ Ah en fait ce que vous voulez mettre en avant c’est le fait que z-index n’a d’effet sur l’élément que dans la pile à laquelle il appartient (sauf exception !) ?
Honnêtement je n’ai pas compris ça en lisant l’article =/

]]> By: Sam http://sametmax.com/le-merdier-du-stacking-context-en-css-aka-pourquoi-mon-z-index-marche-pas-bordel-de-merde/#comment-4908 Sam Mon, 07 Jan 2013 17:29:28 +0000 http://sametmax.com/?p=3499#comment-4908 Ok mon exemple est tout pourri. Celui-ci est mieux foutu: http://css-discuss.incutio.com/wiki/Overlapping_And_ZIndex Ok mon exemple est tout pourri. Celui-ci est mieux foutu: http://css-discuss.incutio.com/wiki/Overlapping_And_ZIndex

]]> By: MatTheCat http://sametmax.com/le-merdier-du-stacking-context-en-css-aka-pourquoi-mon-z-index-marche-pas-bordel-de-merde/#comment-4906 MatTheCat Mon, 07 Jan 2013 17:16:13 +0000 http://sametmax.com/?p=3499#comment-4906 Dans l'exemple la règle n'aura aucun effet parce que <code>z-index</code> n'agit que sur les éléments positionnés (dont la propriété <code>position</code> vaut autre chose que <code>static</code>). Et sur un élément positionné, <code>z-index</code> est relatif à la pile établie par le premier parent positionné : <a href="http://www.w3.org/TR/CSS2/visuren.html#z-index" rel="nofollow">http://www.w3.org/TR/CSS2/visuren.html#z-index</a> Donc si, <code>z-index</code> a un effet même sur un élément dont le parent a aussi un <code>z-index</code>. Dans l’exemple la règle n’aura aucun effet parce que z-index n’agit que sur les éléments positionnés (dont la propriété position vaut autre chose que static).
Et sur un élément positionné, z-index est relatif à la pile établie par le premier parent positionné : http://www.w3.org/TR/CSS2/visuren.html#z-index

Donc si, z-index a un effet même sur un élément dont le parent a aussi un z-index.

]]> By: kinezana http://sametmax.com/le-merdier-du-stacking-context-en-css-aka-pourquoi-mon-z-index-marche-pas-bordel-de-merde/#comment-4905 kinezana Mon, 07 Jan 2013 16:50:18 +0000 http://sametmax.com/?p=3499#comment-4905 Toujours bon à savoir o/ Toujours bon à savoir o/

]]> By: Bronco http://sametmax.com/le-merdier-du-stacking-context-en-css-aka-pourquoi-mon-z-index-marche-pas-bordel-de-merde/#comment-4903 Bronco Mon, 07 Jan 2013 14:36:19 +0000 http://sametmax.com/?p=3499#comment-4903 C'est très clair en effet... et finalement très logique ^^ @anon: +1 C’est très clair en effet… et finalement très logique ^^
@anon: +1

]]> By: anon http://sametmax.com/le-merdier-du-stacking-context-en-css-aka-pourquoi-mon-z-index-marche-pas-bordel-de-merde/#comment-4901 anon Mon, 07 Jan 2013 12:17:05 +0000 http://sametmax.com/?p=3499#comment-4901 Moi je préfère le viol de toutes conventions établies a coup de "!important" Si toutes mes règles sont importantes, je me sens important. Vive le CSS Moi je préfère le viol de toutes conventions établies a coup de “!important”

Si toutes mes règles sont importantes, je me sens important.
Vive le CSS

]]>