search

Home >Web Front-end >CSS Tutorial >Overlapping elements with Z index using CSS

Overlapping elements with Z index using CSS

WBOY
WBOYforward
2023-09-01 10:37:01554browse

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>

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>

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!

Statement：
This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete
Previous article：How to change image on hover using CSS?Next article：How to change image on hover using CSS?

Related articles

See more