Question

我在html表格中有一个图像列表，需要在每个图像上重叠一个小图标。我们如何使用z索引和定位来做到这一点？

Answer 1

<html>
<head>
    <style type="text/css">
        .under
        {
            position:absolute;
            left:0px;
            top:0px;
            z-index:-1;
        }
        .over
        {
            position:absolute;
            left:40px;
            top:10px;
            z-index:-1;
        }
    </style>
</head>

<body>
    <img src="https://tafttest.com/184x46.png" width="184" height="46" class="under" />
    <img src="https://tafttest.com/100x84.png" width="100" height="84" class="over" />
</body>
</html>

Answer 2

您想要在顶部的元素需要具有更高的z-index

因此小图标的z-index为2 并且图像的z指数为1

示例：

.icon {
  z-index: 2;
  position: relative;
  left: 30px;
  top: 30px;
}

.images {
  z-index: 1;
}

Answer 3

您可以使用position:relative并设置right:30px，bottom:30px，将其向上移动并向左移动30个像素。

CSS：

.icon{
position:relative;
right:30px;
bottom:30px;
}

Answer 4

以下是关于您可以使用z-index的指南 https://developer.mozilla.org/en/understanding_css_z-index

关于定位的文章 http://www.tizag.com/cssT/position.php

我们如何使用css样式重叠两个图像？

4 个答案: