Analyse des propriétés du menu déroulant CSS : position et z-index

Analyse des attributs du menu déroulant CSS : position et z-index

Dans la conception Web, le menu déroulant est un composant courant utilisé pour afficher plus d'options ou masquer certains contenus. Afin de mettre en œuvre un menu déroulant complet, il est très important de maîtriser les propriétés de position et de z-index. Cet article analysera ces deux propriétés en détail et fournira des exemples de code spécifiques.

1. Attribut Position
La Position est un attribut important en CSS, utilisé pour définir la méthode de positionnement des éléments. Pour les menus déroulants, les méthodes de positionnement couramment utilisées incluent le positionnement relatif (relatif) et le positionnement absolu (absolu).

1. Positionnement relatif (relatif) : Positionnez l'élément par rapport à sa position normale et occupez toujours l'espace d'origine.
   Exemple de code :

   .dropdown-menu {
     position: relative;
   }

2. Positionnement absolu (absolu) : supprime un élément du flux de documents normal et le positionne par rapport à son élément ancêtre positionné le plus proche, ou par rapport à l'élément contenant d'origine si l'élément ancêtre n'existe pas de bloc pour positionnement.
   Exemple de code :

   .dropdown-menu {
     position: absolute;
     top: 100%;
     left: 0;
   }

2. Attribut z-index
z-index est une propriété en CSS utilisée pour définir l'ordre d'empilement entre les éléments. Dans un menu déroulant, si vous souhaitez qu'il soit au-dessus d'autres éléments, vous devez utiliser la propriété z-index.

1. Ordre d'empilement par défaut :
2. L'ordre d'empilement par défaut des éléments avec un z-index non défini est automatique, c'est-à-dire qu'ils sont empilés dans l'ordre dans lequel ils se trouvent dans le DOM
3. Si le niveau d'empilement de deux éléments est le même ; , les éléments suivants écraseront l'élément précédent.

4. Définissez l'ordre d'empilement :
   En attribuant au menu déroulant une valeur d'index z plus grande, vous pouvez le placer au-dessus des autres éléments.
   Exemple de code :

   .dropdown-menu {
     position: absolute;
     z-index: 9999;
   }

Il est à noter que l'attribut z-index n'est valable que pour les éléments dont la position est relative, absolue ou fixe.

3. Exemple d'application complet
Afin de mieux comprendre l'application de la position et du z-index dans les menus déroulants, un exemple de code complet est donné ci-dessous :

Code HTML :

<div class="dropdown">
  <button class="dropdown-toggle">菜单</button>
  <ul class="dropdown-menu">
    <li>选项一</li>
    <li>选项二</li>
    <li>选项三</li>
    <li>选项四</li>
  </ul>
</div>

Code CSS :

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-toggle {
  background: lightgray;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 9999;
  background: white;
  border: 1px solid lightgray;
  display: none;
  padding: 10px;
}

.dropdown:hover .dropdown-menu {
  display: block;
}

.dropdown-menu li {
  list-style: none;
  cursor: pointer;
}

.dropdown-menu li:hover {
  background: lightblue;
}

Ci-dessus Dans l'exemple, le conteneur du menu déroulant (.dropdown) est défini sur le positionnement relatif, le menu déroulant lui-même (.dropdown-menu) est défini sur le positionnement absolu et l'attribut z-index est défini sur 9999. , afin que le menu déroulant puisse être couvert par d'autres éléments ci-dessus. Dans le même temps, l'événement de survol de la souris est ajouté pour réaliser l'affichage et le masquage du menu déroulant lorsque la souris survole, ainsi que l'effet de changement de couleur d'arrière-plan avec les options.

Résumé :
En comprenant et en appliquant correctement les propriétés de position et d'index z, nous pouvons facilement créer un bel effet de menu déroulant et le placer au-dessus d'autres éléments. Ces deux propriétés ont un large éventail d'utilisations en CSS, qui ne se limitent pas aux menus déroulants. J'espère que cet article pourra aider les lecteurs à mieux appliquer ces deux attributs et à améliorer l'effet et l'expérience utilisateur de la conception Web.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!