Hoe maak je div verschijnen voor een ander?

Raadpleeg de codes hieronder:

<ul>
 <li style="height:100px; overflow:hidden;">
  <div style="height:500px; background-color:black;">
  </div>
 </li>
</ul>

Uit het bovenstaande codes, we weten dat we alleen kunnen zien 100px hoogte van de zwarte achtergrond. Mijn vraag is hoe kunnen we zien 500px hoogte van <div>zwarte achtergrond? Met andere woorden, hoe kan ik de <div>verschijnen voor <li>?

Antwoord 1, Autoriteit 100%

Met de CSS-z-index . Elementen met een grotere z-indexwaarde staan ​​voor elementen met kleinere z-indexwaarden.

Merk op dat om dit te laten werken, moet u ook een positionstijl (position:absolute, position:relativeof position:fixed) op beide / alle elementen die u wilt bestellen

Antwoord 2, Autoriteit 13%

U kunt de z-index in css

<div style="z-index: -1"></div>

Antwoord 3, Autoriteit 8%

Om een ​​element te verschijnen voor andere je hogere z-index het frontelement en lagere z-index geeft het rugelement, ook moet je aangeven position: absolute/fixed...

Voorbeeld:

<div style="z-index:100; position: fixed;">Hello</div>
<div style="z-index: -1;">World</div>

Antwoord 4, Autoriteit 4%

De zwarte divgeeft de volledige 500px weer, tenzij overflow:hiddenis ingesteld op de 100px li

Antwoord 5, autoriteit 4%

Hogere div gebruik hogere z-index en lagere div gebruik lagere z-index en gebruik dan absolute/vaste/relatieve positie

Antwoord 6

Ik denk dat je iets mist.

http://jsfiddle.net/ZNtKj/

<ul>
 <li style="height:100px;overflow:hidden;">
  <div style="height:500px; background-color:black;">
  </div>
 </li>
</ul>
<ul>
 <li style="height:100px;">
  <div style="height:500px; background-color:red;">
  </div>
 </li>
</ul>

In FF4 wordt hier een zwarte balk van 100px weergegeven, gevolgd door een rood blok van 500px.

Een iets ander voorbeeld:

http://jsfiddle.net/ZNtKj/1/

<ul>
 <li style="height:100px;overflow:hidden;">
  <div style="height:500px; background-color:black;">
  </div>
 </li>
</ul>
<ul>
 <li style="height:100px;">
  <div style="height:500px; background-color:red;">
  </div>
 </li>
 <li style="height:100px;overflow:hidden;">
  <div style="height:500px; background-color:blue;">
  </div>
 </li>
 <li style="height:100px;overflow:hidden;">
  <div style="height:500px; background-color:green;">
  </div>
 </li>
</ul>