Maison > Article > interface Web > Éléments superposés avec index Z en utilisant CSS

Éléments superposés avec index Z en utilisant CSS

WBOYavant: 2023-09-01 10:37:01498parcourir

Grâce à la propriété CSS Z-Index, les développeurs peuvent empiler des éléments ensemble. Le Z-Index peut avoir des valeurs positives ou négatives.

Remarque - Si un élément superposé ne spécifie pas de z-index, l'élément affichera la dernière mention du document.

Exemple

Voyons un exemple d'attribut z-index -

强> Live Demo

<!DOCTYPE html>
<html>
<head>
<style>
p {
   margin: 0;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}
div{
   margin: auto;
   position: absolute;
   top:0;
   left: 0;
   right: 0;
   bottom: 0;
}
div:first-child {
   background-color: orange;
   width: 270px;
   height: 120px;
   z-index: -2;
}
div:last-child {
   width: 250px;
   height: 100px;
   z-index: -1;
   background-color: turquoise;
}
</style>
</head>
<body>
<div></div>
<p>Fortran was originally developed by a team at IBM in 1957 for scientific calculations...................</p>
<div>
</div>
</body>
</html>

Sortie

Voici la sortie du code ci-dessus :

使用 CSS 与 Z 索引重叠元素

Exemple

Voyons un autre exemple d'attribut z-index :

Live Demo

<!DOCTYPE html>
<html>
<head>
<style>
p {
   background: url("https://www.tutorialspoint.com/tensorflow/images/tensorflow-mini-logo.jpg");
   background-origin: content-box;
   background-repeat: no-repeat;
   background-size: cover;
   box-shadow: 0 0 3px black;
   padding: 20px;
   background-origin: border-box;
}
</style>
</head>
<h2>Demo</h2>
<body>
<p>This is demo text. This is demo text. This is demo text. This is demo text.
This is demo text. This is demo text. This is demo text. This is demo text.
This is demo text. This is demo text. This is demo text. This is demo text.
This is demo text.</p>
</body>
</html>

Sortie

Voici la sortie de le code ci-dessus Output-

使用 CSS 与 Z 索引重叠元素

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!

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Comment changer l'image au survol en utilisant CSS ?Article suivant：Comment changer l'image au survol en utilisant CSS ?

Articles Liés

Voir plus