Comment obtenir un enfant de l'élément à afficher derrière (en bas à z-index) que son parent?

J'ai besoin d'un certain élément dynamique de de apparaissent toujours au-dessus d'un autre élément, peu importe l'ordre dans l'arborescence DOM, ils sont. Est-ce possible? J'ai essayé z-index (avec position: relative), et il ne semble pas fonctionner.

J'ai besoin de:

<div class="a">
    <div class="b"></div>
</div>

<div class="b">
    <div class="a"></div>
</div>

Pour afficher exactement la même chose lors du rendu. Et pour la souplesse des fins (je suis de la planification sur la distribution d'un plugin qui a besoin de cette fonctionnalité), j'aimerais vraiment ne pas avoir à recourir à l'absolu ou de la correction du positionnement.

Pour ce que ça vaut, pour exécuter la fonction que je voulais, j'ai fait une instruction conditionnelle, où le cumul de l'élément enfant deviendrait transparent dans le cas où il a été bloquant la vue de son parent. Il n'est pas parfait, mais c'est quelque chose.

  • Ce n'est pas possible.
  • C'est possible, en supposant que vous avez seulement à l'imbrication de 1 niveau de profondeur (comme dans l'exemple). Cela va fonctionner: .a > .b, .b > .a {z-index: -1; position: relative}. Si vous avez besoin d'un violon, commentaire, mais je pense que c'est assez explicite.
InformationsquelleAutor dclowd9901 | 2010-03-23
  1. 20

    Si les éléments d'une hiérarchie, il ne peut être fait de cette façon, parce que chaque élément positionné en crée de nouvelles l'empilement de contexte, et z-index est relative aux éléments de la même empilement contexte.

    • J'ai pensé que c'était le cas, mais je n'ai pas la prétention de tout savoir. De toute façon, merci à tous.
    • jsfiddle.net/6xC88
    InformationsquelleAutor jholster
  2. 3

    J'ai trouvé un moyen de mettre l'élément enfant derrière son élément, par la création d'un pseudo-élément qui imite le parent. Utile pour des choses comme déroulant-menus - espérons que cela aide, de l'utilisateur à partir de huit ans!

    https://jsfiddle.net/x7up68s2/7/

    .container > div {

  //will be beyond its child
  background-color: red;
  width: 150px;
  height: 50px;
  z-index: 10;

  //will be above its "child"
  &:before {
    content: '';
    display: block;
    position: absolute;
    height: 100%;
    width: 100%;
    background-color: red;
    z-index: 7;
    top: 10px;
  }
}

.a > .b,
.b > .a {
  z-index: 5;
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: teal;
}
    InformationsquelleAutor moesphemie
  3. 2

    J'ai eu du succès à l'aide de la suite.

    z-index: -1;

    • Cela ne répond pas à la question posée
    • Upvoted, cela ne mérite pas un downvote. Ce partiellement réponses à la question posée - il serait mieux si il l'a démontré avec un violon.
    • Ce ne mérite une downvote parce que c'est incorrect. La question précise l'obtention d'un enfant de l'élément à afficher derrière son parent avec les z-index et sans utiliser le positionnement absolu. Comme jholster a expliqué qu'il ne peut pas être réalisé cela avec ces conditions.
    InformationsquelleAutor Damir Kotoric
  4. 0

    ce que vous avez besoin est position: absolute pour z-index pour le travail.

    aussi, vous aurez besoin de définir le left et top propriétés css pour positionner l'élément au bon endroit. Vous aurez probablement besoin de le faire avec javascript.

    • z-index fonctionne pour positionnée (= relatif, absolu, fixe), c'est à dire non-éléments statiques.
    • Ou position: fixed; ^_^
    InformationsquelleAutor mkoryak