search

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

Using the CSS z-index property

WBOY
WBOYforward
2023-08-26 08:57:31886browse

使用 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

Related articles

See more