在下一个js中定位图像

Question

我想将我的图像放在页面的最右侧，我尝试使用 和 进行position: absolute修改right: 0。我还尝试将父位置设置为相对位置，将图像位置设置为绝对位置，但为什么它不起作用？

这是我的 jsx 文件

        <div className={styles.images}>
          <Image
            src="/cloud.svg"
            alt="Picture of the author"
            layout="fill"
            className={styles.cloud}
          />
          <Image
            src="/kuil.svg"
            alt="Picture of the author"
            height={200}
            width={600}
            layout="intrinsic"
            className={styles.building}
          />
        </div>

也在我的 css 文件中。

.images {
    position: relative;
    margin: 90px auto 0 auto;
}

.building {
    position: absolute;
    top: 0;
    right: 0 !important;
    bottom: 0 !important;
}

Answer 1

我也遇到过同样的问题。编译时，Image 标签用相对样式位置的 div 标签包裹 img 标签。

解决方案是简单地将 Image 标签用 div 包裹起来，并将类名添加到 div 中。

检查代码沙箱