Z-indexli alt div'in arkasındaki çocuğu div yapalım mı?

Ne denersem deneyeyim, çocuk dalı her zaman ebeveyni önündedir. Çocuğu ebeveyni arkasında div yapmanın bir yolu var mı? z-index çalışmıyor gibi görünüyor.

Notlar:

  1. Html’i değiştirmek istemiyorum

  2. üst öğenin z dizinine sahip olması gerekir

  3. yinelenen "Alt öğeyi z-indeksi ile üst öğeden üste nasıl getirebilirim" dilbilgisi anlamında değildir ve okunması zor ve gerçekten bana yardımcı olmadı.


<div id='parent'>
    <div id='child'>
    </div>
</div>

#parent {
    width:50px;
    height:50px;
    background:red;
    position:absolute;  
    z-index:100;
}

#child {
    width:50px;
    height:50px;
    background:blue;
    position:absolute;  
    z-index:-100;
}

JSFiddle

0
programım kapsamında, ebeveynin bir z indeksinin olması gerekir
katma yazar foreyez, kaynak
programım kapsamında, ebeveynin bir z indeksinin olması gerekir
katma yazar foreyez, kaynak
Belirlediğiniz sorun nedir? Bence z-index hakkındaki modeliniz durumla eşleşmiyor.
katma yazar Todd Mark, kaynak
Belirlediğiniz sorun nedir? Bence z-index hakkındaki modeliniz durumla eşleşmiyor.
katma yazar Todd Mark, kaynak
Üstteki z indeksini çıkarın. jsfiddle.net/j08691/j6e9qho3/2
katma yazar j08691, kaynak
Üstteki z indeksini çıkarın. jsfiddle.net/j08691/j6e9qho3/2
katma yazar j08691, kaynak
z-index bunun için çalışmayacak, çünkü alt öğeler ebeveynlerinin z-index öğelerini devralır, bundan sonra kendi zindex öğelerini uygularlar. Bu nedenle, bu durumda z dizini tüm alt öğelerin rekabet etmesine izin verir, ancak üst öğelerini terk etmelerine izin vermez. Demek istediğim şu: jsfiddle.net/nvLyacje/1 kısıtlamaları belki bir iş bulabiliriz
katma yazar Alexei Darmin, kaynak
z-index bunun için çalışmayacak, çünkü alt öğeler ebeveynlerinin z-index öğelerini devralır, bundan sonra kendi zindex öğelerini uygularlar. Bu nedenle, bu durumda z dizini tüm alt öğelerin rekabet etmesine izin verir, ancak üst öğelerini terk etmelerine izin vermez. Demek istediğim şu: jsfiddle.net/nvLyacje/1 kısıtlamaları belki bir iş bulabiliriz
katma yazar Alexei Darmin, kaynak
Ayrıca, bunun kopyası:
katma yazar Alexei Darmin, kaynak
Ayrıca, bunun kopyası:
katma yazar Alexei Darmin, kaynak

8 cevap

Ebeveynlerin içindeki kardeşlerle uğraşarak istediğim şeyi elde edebildim ...

<div id='parent'>

    <div id='child1'>
    </div>

    <div id='child2'>
    </div>
</div>

ebeveynin kendi z indeksine sahip saydam bir kap olduğu, ancak çocuklar çizilen gerçek renk kareleridir (her biri kendi z indeksine sahip).

0
katma

Ebeveynlerin içindeki kardeşlerle uğraşarak istediğim şeyi elde edebildim ...

<div id='parent'>

    <div id='child1'>
    </div>

    <div id='child2'>
    </div>
</div>

ebeveynin kendi z indeksine sahip saydam bir kap olduğu, ancak çocuklar çizilen gerçek renk kareleridir (her biri kendi z indeksine sahip).

0
katma

AFAIK, bir ebeveyni çocuğun üzerine yerleştirmek mümkün değildir. Bununla birlikte, HTML'yi değiştirmeden yeni bir öğe oluşturmak için : before veya : after 'ı kullanabilir ve çocuğun üstünde ki ;

#parent:after {
    background: red;
    content: "ON TOP";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
}

http://jsfiddle.net/j6e9qho3/12/

Düzenleme: Veya ebeveynin çocuğun üstünde olmasının etkisinin görülmesi, çocuğun hiç görülmemesidir, yapılacak en kolay şey muhtemelen #child {display: none} 'dir. Ama bunun başka nedenlerden dolayı işe yaramadığını varsayıyorum.

Belki başarmak istediğini açıklarsan daha fazla yardım edebiliriz.

0
katma

AFAIK, bir ebeveyni çocuğun üzerine yerleştirmek mümkün değildir. Bununla birlikte, HTML'yi değiştirmeden yeni bir öğe oluşturmak için : before veya : after 'ı kullanabilir ve çocuğun üstünde ki ;

#parent:after {
    background: red;
    content: "ON TOP";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
}

http://jsfiddle.net/j6e9qho3/12/

Düzenleme: Veya ebeveynin çocuğun üstünde olmasının etkisinin görülmesi, çocuğun hiç görülmemesidir, yapılacak en kolay şey muhtemelen #child {display: none} 'dir. Ama bunun başka nedenlerden dolayı işe yaramadığını varsayıyorum.

Belki başarmak istediğini açıklarsan daha fazla yardım edebiliriz.

0
katma

alt div 'i gerçekten üst ' de içerme Pozisyonlar mutlak olduğu için bunu yapabilirsiniz:

<div id='parent'>
</div>
<div id='child'>
</div>

Şimdi, parent öğesinin z-index 'i alt ' dan küçükse, en üstte görünecektir.

0
katma

alt div 'i gerçekten üst ' de içerme Pozisyonlar mutlak olduğu için bunu yapabilirsiniz:

<div id='parent'>
</div>
<div id='child'>
</div>

Şimdi, parent öğesinin z-index 'i alt ' dan küçükse, en üstte görünecektir.

0
katma

Bunu başaramazsınız çünkü onlar aynı bağlamı istifleme . Bununla birlikte, geçici bir çözüm opacity: 0 değerini çocuğa ayarlayabilir.

<div class="snippet" data-lang="js" data-hide="false"> <div class="snippet-code">

#parent {
  width: 50px;
  height: 50px;
  background: red;
  position: absolute;
  z-index: 1;
}

#child {
  width: 50px;
  height: 50px;
  background: blue;
  position: absolute;   
  z-index: 2;
  opacity: 0;
}
<div id='parent'>
  <div id='child'></div>
</div>
</div> </div>
0
katma

Bunu başaramazsınız çünkü onlar aynı bağlamı istifleme . Bununla birlikte, geçici bir çözüm opacity: 0 değerini çocuğa ayarlayabilir.

<div class="snippet" data-lang="js" data-hide="false"> <div class="snippet-code">

#parent {
  width: 50px;
  height: 50px;
  background: red;
  position: absolute;
  z-index: 1;
}

#child {
  width: 50px;
  height: 50px;
  background: blue;
  position: absolute;   
  z-index: 2;
  opacity: 0;
}
<div id='parent'>
  <div id='child'></div>
</div>
</div> </div>
0
katma