web-dev-qa-db-fra.com

Comment faire apparaître une div au dessus de tout le reste à l'écran?

J'ai le popup suivant:

enter image description here

Mais quand je déplace ce popup pour qu'il apparaisse sur la carte, il devient caché:

enter image description here

J'ai essayé de définir l'index z sur ma feuille de propriétés CSS, mais cela n'a pas fonctionné.

Existe-t-il une propriété HTML/CSS que je peux définir pour que la fenêtre contextuelle, qui est une DIV, se place toujours au-dessus de tout le reste?

csshtmlpopupz-index
18
jordan

z-index n'est pas ce simple ami. Cela n'a pas d'importance si vous mettez z-index:999999999999..... Mais c'est important LORSQUE vous lui avez donné le z-index. Différents éléments dom sont également prioritaires les uns sur les autres.

J'ai utilisé une solution dans laquelle jQuery a été utilisé pour modifier les éléments CSS, et je lui ai donné le z-index uniquement lorsque j'avais besoin que l'élément soit au-dessus. De cette façon, nous pouvons être sûrs que le z-index de cet élément a été donné en dernier et que l'index sera noté. Celui-ci nécessite quelques actions pour être traité si, mais dans votre cas, cela semble être possible.

Vous ne savez pas si cela fonctionne, mais vous pouvez aussi essayer de donner le paramètre !important:

#desired_element { z-index: 99 !important; }

Référence philipwalton.com

23
GotBatteries

Utilisez-vous position: relative? 

Essayez de définir position: relative et ensuite z-index car vous voulez que cette div ait un z-index en relation avec une autre div.

Au fait, votre navigateur est important de vérifier s'il fonctionne ou non. Ni IE ni Firefox ne sont bons.

10
Hugo Sousa

Définissez l'index z de la DIV sur une valeur supérieure à celle des autres DIV. Vous devrez également vous assurer que la DIV a également une variable position autre que static.

CSS:

#someDiv {
    z-index:9; 
}

Lisez plus ici: http://coding.smashingmagazine.com/2009/09/15/the-z-index-css-property-a-comprehensive-look/

5
Jason

Essayez de régler la position sur absolue, c'est-à-dire. 

#yourDiv{
    position: absolute;
    z-index: 10;
};
4
Paul G

vous devriez utiliser position:fixed pour créer des valeurs z-index à appliquer à votre div

3
Phaneendra Charyulu Kanduri

Pour cela, insérez le panneau que vous souhaitez développer à l’intérieur d’une DIV définie comme relative: laissez-nous vous montrer:

<div style="position:relative">
  <div style="position:absolute; z-index: 1000;">
    your code
  </div>
<div>

Vous utilisez la première div pour positionner le contenu interne dans une zone spécifique de votre page et la seconde absolue doit être référée au conteneur (car elle est relative). L'indice z, dans ce cas, est également référé au conteneur et s'il est supérieur à la valeur le conteneur doit être en haut. Vous pouvez placer le style dans une classe css et modifier la taille de la div absolue pour le développer en survol ou avec une autre action que vous souhaitez contrôler.

J'espère que cette aide

1
freedeveloper