css - 在不影响顶部放置的第二个图像的情况下制作图像填充屏幕

Question

我试图将一本书 (img2) 放在书架 (img1) 上，下面的代码根据窗口而不是书架的位置来定位书。我想知道是否有人知道如何根据书架制作书籍位置。现在这本书正在正确调整大小，但没有正确定位。

<style>
        .bookcontainer {

        }
        .img1 {
            max-width: 100%;
            max-height: 90%;  
            position: absolute;
            margin:auto;
            top:0;
            bottom:0;
            left:0;
            right:0;
        }
        .img2 {
          position:absolute;
          right: 40%;
          top: 15%;
          width: 50%;
          max-width:50%;
        }
</style>

<div class="bookcontainer">
  <img class="img1" src="/assets/shelfbg.png">
  <img class="img2" src="/assets/book.png">
</div>

Answer 1

父容器也必须设置css位置，所以让bookshelf img定义空间，让书是绝对的，这样:

.bookcontainer {
    position: relative;
}
.img1 {
    width: 100%;
}
.img2 {
    position:absolute;
    right: 40%;
    top: 15%;
    width: 50%;
    max-width:50%;
}

这样，您可以使用百分比调整书籍相对于其父容器的位置和大小。