定位img和背景

Question

page-project

我正在寻找在屏幕上放置图像的解决方案，试图在 div class=col 中制作容器并放置整个东西，但即使相对位置也不起作用。我，正在使用 bootstrap5，SCSS。

<div class="col-md-3">
                <div class="imgs">
                <img class="obraz1" src="images/content/obraz1.jpg" alt="obrazek1">
                <img class="sign2" src="images/content/sign2.png" alt="znak1">
                <img class="obraz2" src="images/content/obraz2.jpg" alt="obrazek2">
                <img class="sign1" src="images/content/sign1.png" alt="znak2">
                </div>
            </div>

有什么想法吗？

Answer 1

根据您提供的设计，您需要使用额外的 CSS 样式将符号放置在这些确切位置。

看，关于如何做的文章Absolute Positioning Inside Relative Positioning

此外，您还需要设置不同的 z-index 值以将图像一个个堆叠在一起。

请参阅 MDN 网络文档上的 z-index 的 documentation page。