CSS|重叠元素z-index

最新推荐文章于 2022-12-22 09:57:54 发布

Alan_Lowe

最新推荐文章于 2022-12-22 09:57:54 发布

阅读量205

点赞数 2

分类专栏： # CSS 文章标签： html css z-index

本文链接：https://blog.csdn.net/qq_45985728/article/details/119551480

版权

CSS 专栏收录该内容

30 篇文章 1 订阅

订阅专栏

CSS|重叠元素z-index

元素的定位与文档流无关，所以它们可以覆盖页面上的其它元素，z-index属性指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面），一个元素可以有正数或负数的堆叠顺序。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>z-index</title>
  <style>
    /*z-index属性指定了一个元素的堆叠顺序*/
    div{
      color: red;
    }
    .index1{
      position: absolute;
      top: 0px;
      left: 0px;
      z-index: -1;
    }
    .index2{
      position: absolute;
      top: 10px;
      left: 10px;
      z-index: 1;
    }
  </style>
</head>
<body>

<div>
  <img class="index1" src="../resource/image/img.png" alt="科比">
  div111111111111111111</br>
  div111111111111111111</br>
  div111111111111111111</br>
  div111111111111111111</br>
  <img class="index2" src="../resource/image/demo01.png" alt="QQ">
</div>

</body>
</html>

效果：

在这里插入图片描述

我们可以看到QQ图标放置在了最上层，科比图片放置在了最下层。

人生没有白走的路，每一步都算数!

Alan_Lowe

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS|重叠元素z-index

CSS|重叠元素z-index元素的定位与文档流无关，所以它们可以覆盖页面上的其它元素，z-index属性指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面），一个元素可以有正数或负数的堆叠顺序。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>z-index</title> <style> /*z-
复制链接

扫一扫