css - 定位图像，使其始终以相同的方式定位，无论窗口宽度如何

Question

我试图在我的网站上放置一张图片，使其看起来像是剪在网站内容上的 Papercut ，位于 body block 的外裙边，如下所示:

我设法使用 position: absolute; 获得了这个定位； css 属性，然后使用顶部/右侧值定位图像。问题是这只适用于我的家庭全屏(当然还有其他具有相同分辨率的屏幕)，一旦我缩小窗口，它看起来像这样:

图像向内移动，因为我的 CSS 要求它这样做。有没有人知道我应该使用什么 CSS 属性将图像定位在同一个位置，无论窗口有多宽？

编辑:这是我使用 George 和 Ed 的输入解决的 CSS:

#picture-container {
            position: relative;
            max-width: 1px;
            max-height: 1px;
        }

        #image {
            position: absolute;
            right: -932px;
            top: -30px;
        }

Answer 1

修复方法是将 position: relative 添加到您的容器(创建一个新的定位上下文)，然后相对于它定位图像。目前，您正在相对于 body 定位 img。

查看 this fiddle这显示了声明所产生的差异，下面是屏幕截图。

我真的建议您花 5 分钟阅读 this以确保您准备好使用 CSS 来布局和定位事物。