Überlappende Elemente mit Z-Index mithilfe von CSS-CSS-Tutorial-php.cn

Überlappende Elemente mit Z-Index mithilfe von CSS

WBOY

Freigeben： 2023-09-01 10:37:01

nach vorne

592 Leute haben es durchsucht

Mit der CSS-Z-Index-Eigenschaft können Entwickler Elemente zusammenstapeln. Der Z-Index kann positive oder negative Werte haben.

Hinweis – Wenn ein überlappendes Element keinen Z-Index angibt, zeigt das Element die letzte Erwähnung des Dokuments an.

Beispiel

Sehen wir uns ein Beispiel des Z-Index-Attributs an -

强> 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>

Nach dem Login kopieren

Ausgabe

Hier ist die Ausgabe des obigen Codes:

使用 CSS 与 Z 索引重叠元素

Beispiel

Sehen wir uns ein weiteres Beispiel für ein Z-Index-Attribut an:

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>

Nach dem Login kopieren

Ausgabe

Hier ist die Ausgabe von die obige Codeausgabe-

使用 CSS 与 Z 索引重叠元素

Das obige ist der detaillierte Inhalt vonÜberlappende Elemente mit Z-Index mithilfe von CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!