CSS Ich möchte, dass ein Div alles im Griff hat

Wie erstelle ich ein HTML-Div-Tag, um alles im Griff zu haben?

Damit der Z-Index funktioniert, müssen Sie dem Element eine position:absoluteoder eine position:relativeEigenschaft zuweisen. Sobald Sie dies tun, funktionieren Ihre Links ordnungsgemäß, obwohl Sie Ihr CSS möglicherweise etwas später anpassen müssen.

Zum z-index:1000 einen Effekt zu erzielen, benötigen Sie ein nicht statisches Positionierungsschema.

Fügen Sie position:relative;einer Regel hinzu, indem Sie das Element auswählen, über dem Sie sich befinden möchten

Ja, damit der Z-Index funktioniert, müssen Sie dem Element die Eigenschaft position: absolute oder position: relative geben.

Aber ... pass auf die Eltern auf!

Sie müssen die Knoten der Elemente hochgehen, um zu überprüfen, ob auf der Ebene des gemeinsamen übergeordneten Elements die ersten Nachkommen einen definierten Z-Index haben.

Alle anderen Nachkommen können niemals im Vordergrund stehen, wenn sich an der Basis ein niedrigerer definitiver Z-Index befindet.

In diesem Snippet-Beispiel hat div1-2-1 einen Z-Index von 1000, befindet sich jedoch unter dem div1-1-1 mit einem Z-Index von 3.

Dies liegt daran, dass div1-1 einen Z-Index hat, der größer als div1-2 ist.

.div {
  
}

#div1 {
  z-index: 1;
  position: absolute;
  width: 500px;
  height: 300px;
  border: 1px solid black;
}

#div1-1 {
  z-index: 2;
  position: absolute;
  left: 230px;
  width: 200px;
  height: 200px;
  top: 31px;
  background-color: indianred;
}

#div1-1-1 {
  z-index: 3;
  position: absolute;
  top: 50px;
  width: 100px;
  height: 100px;
  background-color: burlywood;
}

#div1-2 {
  z-index: 1;
  position: absolute;
  width: 200px;
  height: 200px;
  left: 80px;
  top: 5px;
  background-color: red;
}

#div1-2-1 {
  z-index: 1000;
  position: absolute;
  left: 70px;
  width: 120px;
  height: 100px;
  top: 10px;
  color: red;
  background-color: lightyellow;
}

.blink {
  animation: blinker 1s linear infinite;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}

.rotate {
  writing-mode: vertical-rl;
  padding-left: 50px;
  font-weight: bold;
  font-size: 20px;
}

<div class="div" id="div1">div1</br>z-index: 1
  <div class="div" id="div1-1">div1-1</br>z-index: 2
    <div class="div" id="div1-1-1">div1-1-1</br>z-index: 3</div>
  </div>
  
  <div class="div" id="div1-2">div1-2</br>z-index: 1</br><span class='rotate blink'><=</span>
    <div class="div" id="div1-2-1"><span class='blink'>z-index: 1000!!</span></br>div1-2-1</br><span class='blink'> because =></br>(same</br>   parent)</span></div>
  </div>
</div>

Sie müssen position:relative;dem Menü hinzufügen . Der Z-Index funktioniert nur, wenn Sie ein nicht statisches Positionierungsschema haben.

z-indexEigenschaft ermöglicht es Ihnen, Ihre Kontrolle an der Front zu übernehmen. Je größer die Zahl, die Sie setzen, desto höher ist Ihr Element.

positionDie Eigenschaft sollte sein, relativeweil die Position von html-elementin allen Dimensionen relativ zu anderen Steuerelementen relativ sein sollte.

element.style {
   position:relative;
   z-index:1000; //change your number as per elements lies on your page.
}

Ich gehe davon aus, dass Sie ein Popup mit Code aus der WW3-Schule erstellen, richtig? Überprüfen Sie es CSS. die .modale, da ist schon was z-indexda. Ändern Sie einfach von 1 auf 100.

.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}