Heim > Artikel > Web-Frontend > Überlappende Elemente mit Z-Index mithilfe von CSS

Überlappende Elemente mit Z-Index mithilfe von CSS

WBOYnach vorne: 2023-09-01 10:37:01498Durchsuche

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>

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>

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!

Stellungnahme：

Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Wie ändere ich ein Bild beim Schweben mit CSS?Nächster Artikel：Wie ändere ich ein Bild beim Schweben mit CSS?

In Verbindung stehende Artikel

Mehr sehen