Home > Article > Web Front-end > Using the CSS z-index property

Using the CSS z-index property

WBOYforward: 2023-08-26 08:57:31749browse

使用 CSS z-index 属性

# The z-index property is used with the position property to create layer effects. You can specify which element should be at the top and which element should be at the bottom.

Example

You can try running the following code to implement the z-index attribute -

<html>
   <head>
   </head>
   <body>
      <div style = "background-color:blue; width:300px; height:100px; position:relative; top:10px; left:80px; z-index:2">
      </div>
      <div style = "background-color:gray; width:300px; height:100px; position:relative; top:-60px; left:35px; z-index:1;">
      </div>
      <div style = "background-color:yellow; width:300px; height:100px; position:relative; top:-220px; left:120px; z-index:3;">
      </div>
   </body>
</html>

The above is the detailed content of Using the CSS z-index property. For more information, please follow other related articles on the PHP Chinese website!

css position

Statement：

This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete

Previous article：Construct a circular radial gradientNext article：Construct a circular radial gradient

See more

Using the CSS z-index property

Example

Related articles