当前位置:首页 > 行业动态 > 正文

css中如何设置z index.html

在CSS中,可以使用zindex属性来设置元素的堆叠顺序。zindex的值越大,元素越靠前显示,以下是一个简单的示例:

css中如何设置z index.html  第1张

<!DOCTYPE html>
<html>
<head>
<style>
  .box1 {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100px;
    height: 100px;
    backgroundcolor: red;
    zindex: 1;
  }
  .box2 {
    position: absolute;
    left: 50px;
    top: 50px;
    width: 100px;
    height: 100px;
    backgroundcolor: blue;
    zindex: 2;
  }
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>

在这个示例中,我们创建了两个矩形框(红色和蓝色),并分别设置了它们的zindex值,红色框的zindex值为1,蓝色框的zindex值为2,由于蓝色框的zindex值较大,所以它显示在红色框的上方。

css中如何设置z index.html  第2张

0