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

Question

I am trying to have an icon with a number on top in the left corner of a div container, to the right of this number and icon is an image. On the desktop this looks fine, separated accordingly but on the mobile devices, the image on the right appears over the icon and text on the left.

HTML looks like this:

                        <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: device

device2

PC: desktop

Image and text if they were more in the corner,it might not happen but the sizing for the main image is not correct either for a mobile device, but not sure how to change it.

Answer 1

Set z-index: 10; on your span and create a separate rule set for.wrap-image with a property position: relative; .

A z-index is essentially layering so it always appears on top of your image and when using absolute position you always want to set the position of the parent as relative so that the absolute position of left, right, center, bottom is actually realtive to the parent container rather than the next relatively positioned element or body is one is not defined.

Answer 2

Try positioning it directly to the top of the container using the below:

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

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

The bigger image(in the second div) itself probably needs to be wrapped too.