css 图像出现在文本和另一个图像上

Question

我试图在 div 容器的左角顶部有一个带有数字的图标，在这个数字的右侧，图标是一个图像。在桌面上这看起来很好，并相应地分开，但在移动设备上，右侧的图像出现在左侧的图标和文本之上。

HTML 看起来像这样：

                        <div class="col-1">
                            <div class="wrap-image">
                            <a
                                th:rowNumber="${status.count}" th:href="@{'/basket/remove/' + ${product.id}}">
                                <img src="images/bin.png" height="60">
                                <span z-index: 10;>[[${status.count}]]</span>
                            </a>
                            </div>

                    </div>
                    <div class="col-3">
                        <img th:src="@{${product.mainImagePath}}" class="img-fluid" />
                    </div>

css:

.wrap-image {
  position: relative;
  width: min-content;
}

.wrap-image span {
  position: absolute;
  top: 1px;
  left: 20px;
}

设备： device

device2

电脑： desktop

如果图像和文本更多地位于角落，则可能不会发生，但主图像的大小对于移动设备也不正确，但不确定如何更改。

Answer 1

尝试使用以下方法将其直接定位到容器顶部：

.wrap-image {
  position: relative;
  width: min-content;
  top: 0px;
  right: 30px;
}

.wrap-image span {
  position: absolute;
  top: 0px;
  right: 30px;
}

较大的图像（在第二个 div 中）本身可能也需要包装。

Answer 2

在您的跨度上设置z-index: 10;，并为具有position: relative; 属性的.wrap-image 创建一个单独的规则集。

z-index 本质上是分层的，因此它总是出现在图像的顶部，并且在使用绝对位置时，您总是希望将父级的位置设置为相对位置，以便左、右、中、下的绝对位置是实际上对于父容器来说是真实的，而不是下一个相对定位的元素或主体是未定义的。