webentwicklung-frage-antwort-db.com.de

So wird ein übergeordnetes Element über dem untergeordneten Element angezeigt

Ich habe zwei verschachtelte CSS-Elemente. Ich muss das Elternteil dazu bringen, über dem Kindelement zu sein, dh über der Z-Achse. Es reicht nicht aus, nur den Z-Index festzulegen.

Ich kann für das untergeordnete Element keinen negativen Z-Index festlegen, der unter dem Seitencontainer auf meiner aktuellen Seite liegt. Ist das die einzige Methode?

http://jsbin.com/ovafo/edit

.parent {
  position:  relative;
  width: 750px;
  height: 7150px;
  background: red;
  border: solid 1px #000;
  z-index: 1;
}
.child {
  position: absolute;
  background-color: blue;
  z-index: 0;
  color: white;
  top: 0;
}
.wrapper
{
  position: relative;
  background: green;
  z-index: 10;
}
<div class="wrapper">
  <div class="parent">
    parent parent
    <div class="child">
      child child child
    </div>
  </div>
</div>
76
Jourkey

Setze ein negatives z-index für das Kind, und entfernen Sie den Satz für das Elternteil.

.parent {
    position: relative;
    width: 350px;
    height: 150px;
    background: red;
    border: solid 1px #000;
}
.parent2 {
    position: relative;
    width: 350px;
    height: 40px;
    background: red;
    border: solid 1px #000;
}
.child {
    position: relative;
    background-color: blue;
    height: 200px;
}
.wrapper {
    position: relative;
    background: green;
    height: 350px;
}
<div class="wrapper">
    <div class="parent">parent 1 parent 1
        <div class="child">child child child</div>
    </div>
    <div class="parent2">parent 2 parent 2
    </div>
</div>

https://jsfiddle.net/uov5h84f/

71

Zum Glück gibt es eine Lösung. Sie müssen einen Wrapper für das übergeordnete Element hinzufügen und den Z-Index dieses Wrappers ändern, z. B. 10, und den Z-Index für das untergeordnete Element auf -1 setzen:

.parent {
    position: relative;
    width: 750px;
    height: 7150px;
    background: red;
    border: solid 1px #000;
    z-index: initial;
}

.child {
    position: relative;
    background-color: blue;
    z-index: -1;
    color: white;
}

.wrapper {
    position: relative;
    background: green;
    z-index: 10;
}
<div class="wrapper">
    <div class="parent">parent parent
        <div class="child">child child child</div>
    </div>
</div>
50
zielu1

Einige dieser Antworten funktionieren, aber das Setzen von position: absolute; und z-index: 10; schien ziemlich stark zu sein, nur um den gewünschten Effekt zu erzielen. Das Folgende war alles, was ich brauchte, obwohl ich es leider nicht weiter reduzieren konnte.

HTML:

<div class="wrapper">
    <div class="parent">
        <div class="child">
            ...
        </div>
    </div>
</div>

CSS:

.wrapper {
    position: relative;
    z-index: 0;
}

.child {
    position: relative;
    z-index: -1;
}

Ich habe diese Technik verwendet, um einen umrandeten Hover-Effekt für Bildverknüpfungen zu erzielen. Es gibt hier etwas mehr Code, aber es verwendet das obige Konzept, um den Rand über dem Bild anzuzeigen.

http://jsfiddle.net/g7nP5/

7
TheShrew

Hat es geknackt. Wenn Sie den Z-Index auf das Negative setzen, wird das übergeordnete Element ignoriert, unabhängig davon, ob es positioniert ist oder nicht. Es befindet sich hinter dem nächsten positionierten Element, das in Ihrem Fall Ihr Hauptcontainer war. Daher müssen Sie Ihr übergeordnetes Element in ein anderes, positioniertes div einfügen, und Ihr untergeordnetes div wird dahinter sitzen.

Das herauszufinden war für mich eine Lebensrettung, da mein übergeordnetes Element speziell nicht positioniert werden konnte, damit mein Code funktioniert.

Ich fand all dies unglaublich nützlich, um den hier beschriebenen Effekt zu erzielen: Verwenden Sie nur CSS, und zeigen Sie div mit der Maus über <a>

3
Edd Tillen

Da Ihre divs position:absolute Sind, sind sie in Bezug auf die Position nicht wirklich verschachtelt. Auf Ihrer Jsbin-Seite habe ich die Reihenfolge der Divs im HTML geändert:

<div class="child"><div class="parent"></div></div>

und das rote Kästchen deckte das blaue Kästchen ab, das ich für das halte, wonach Sie suchen.

3
carillonator

Sie müssten position:relative Oder position:absolute Für Eltern und Kind verwenden, um z-index Zu verwenden.

2
Divya Manian