有没有一种方法可以使图像在div中忽略滚动而不移动到页面的某个角落？

Question

我一直试图为HTML页面创建一个更新日志。问题是，工作是“让它看起来漂亮”--这是我被问到的问题的确切引语。他们希望在每个div的角落都有一个特定的图像，但我遇到了一个问题。有些div滚动，特别是更新日志。每当我试图使div滚动，图像粘在一个点(图片的解释附件)。我试图使它的图像坚持到他们的角落，而不管滚动，不要移动卷轴。有办法这样做吗？CSS和HTMl很好，我只是想把它限制在项目的HTML上。

编辑:忘了说这句话，但每当我使用位置-修复它结束到页面的边缘，而不是div。这也必须是移动友好的最好。

它所做的：链接到图像:迷你角图片滚动与div。

我需要它做什么(通过FireAlpaca编辑的图像，而不是实际发生的事情)：图片链接:迷你角图片不受滚动的影响.

我当前的HTML & CSS代码：

​

.heightc {
    height: 460px;
}

<div class="col-lg heightc margin scroll inner" style="flex-grow: 3; border: 5px solid #acb2b5;">
    <img style="position: absolute; top: -1px; left: -1px; width: 50px; z-index: 1;" src="https://f2.toyhou.se/file/f2-toyhou-se/images/51687767_YMNPzQqkmi2CP1H.png" alt="Top left corner">
    <img style="position: absolute; top: -1px; right: -1px; width: 50px; z-index: 1;" src="https://f2.toyhou.se/file/f2-toyhou-se/images/51687774_ZWtici8CxHbaKAt.png" alt="Top right corner">
    <img style="position: absolute; bottom: -1px; left: -1px; width: 50px; z-index: 1;" src="https://f2.toyhou.se/file/f2-toyhou-se/images/51687760_DcjvijLLUCRXi1e.png" alt="Bottom left corner">
    <img style="position: absolute; bottom: -1px; right: -1px; width: 50px; z-index: 1;" src="https://f2.toyhou.se/file/f2-toyhou-se/images/51687807_VnKHqCyMkhDfhgf.png" alt="Bottom right corner">
    <p>
        <b style="padding: 5px;">22/05/22</b>
        <a href="https://toyhou.se/~world/74697.20studios">Updated: Alpha 0.1.3 Added all bases to base character gallery.</a>
    </p>
</div>

​

Answer 1

在父容器中写上“相对”的位置。

/* Box C */
.heightc {
    height: 460px;
    position: relative;
}

HAving图像定位为绝对位置和父图像相对位置，图像将定位在父容器的区域内