我有下面的code个(也粘贴在下面)，我想在那里做一个两列的布局.在第一个中，我放置了两个图像，而在第二个中，我显示了一些文本.
在第一列中，我希望第一个图像上有width:70%个图像，第二个图像上有position:absolute个图像.最终结果应该是this
如您所见，第二张图像部分位于第一张图像中，在每个屏幕上，从768px到768px.
我可以在第一张上找到第二张图片的一部分，但这不是动态的，如果你改变屏幕尺寸，你可以看到它是如何折叠的.
但是无论我怎么努力，我都达不到这个结果.
.checkoutWrapper {
display: grid;
grid-template-columns: 50% 50%;
}
.coverIMGLast {
width: 70%;
height: 100vh;
}
/* this .phone class should be dynamically located partially on first image */
.phone {
position: absolute;
height: 90%;
top: 5%;
bottom: 5%;
margin-left: 18%;
}
.CheckoutProcess {
padding: 5.8rem 6.4rem;
}
.someContent {
border: 1px solid red;
}
/* removing for demo purposes
@media screen and (max-width: 768px) {
.checkoutWrapper {
display: grid;
grid-template-columns: 100%;
}
img {
display: none;
}
.CheckoutProcess {
padding: 0;
}
}
*/<div class="checkoutWrapper">
<img src="https://via.placeholder.com/300" class="coverIMGLast" />
<img src="https://via.placeholder.com/300/ff0000" class="phone" />
<div class="CheckoutProcess">
<Content />
</div>
</div>