it-swarm.it

CSS Voglio che un div sia al di sopra di tutto

Come faccio a creare un tag div HTML per essere in cima a tutto?

85
Flo

Affinché z-index funzioni, devi dare all'elemento un position:absolute o a position:relative proprietà. Una volta fatto ciò, i tuoi collegamenti funzioneranno correttamente, anche se potresti dover modificare il tuo CSS un po 'più tardi.

98
Skylar Anderson

Per z-index:1000 per avere un effetto è necessario uno schema di posizionamento non statico.

Inserisci position:relative; alla regola #settingsdetails alla riga 8 del file mystyle.css

32

Devi aggiungere position:relative; al menu. L'indice Z funziona solo quando si dispone di uno schema di posizionamento non statico.

16
Rich Bradshaw

Sì, affinché z-index funzioni, è necessario assegnare all'elemento una posizione: assoluta o una posizione: proprietà relativa.

Ma ... presta attenzione ai genitori!

Devi risalire i nodi degli elementi per verificare se a livello del genitore comune i primi discendenti hanno un indice z definito.

Tutti gli altri discendenti non possono mai essere in primo piano se alla base c'è un indice z definito inferiore.

In questo esempio di frammento, div1-2-1 ha un indice z di 1000 ma è comunque sotto div1-1-1 che ha un indice z di 3.

Questo perché div1-1 ha un indice z maggiore di div1-2.

enter image description here

.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>
12
A. Morel

z-index proprietà ti consente di assumere il controllo in primo piano. il numero più grande che imposti è alto il tuo elemento che ottieni.

La proprietà position dovrebbe essere relative perché la posizione di html-element dovrebbe essere posizionato relativamente rispetto ad altri controlli in tutte le dimensioni.

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

Ho pensato che avresti fatto un popup con il codice della scuola della terza guerra mondiale, giusto? controlla css. quello .modal, ci sono già Word z-index Là. cambia da 1 a 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 */
}
3
KhmerNews Tech