Overlapping elements with Z index using CSS-CSS Tutorial-php.cn

Overlapping elements with Z index using CSS

WBOY

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

forward

570 people have browsed it

Using the CSS Z-Index property, developers can stack elements on top of each other. Z-Index can have positive or negative values.

Note - If the overlapping element does not specify a z-index, the element will display the last mention of the document.

Example

Let’s look at an example of the z-index attribute -

强> Live Demonstration

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

Copy after login

Output

Here is the output of the above code:

使用 CSS 与 Z 索引重叠元素

Example

Let’s see another one Example of z-index attribute:

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>

Copy after login

Output

The following is the output of the above code-

使用 CSS 与 Z 索引重叠元素

The above is the detailed content of Overlapping elements with Z index using CSS. For more information, please follow other related articles on the PHP Chinese website!