CSS图像定位混乱

Question

所以我正在做一门课程，我必须使用z-index将图像塞到下面的div后面:它应该是这样的:示例这是我的样子，即使复制了完全相同的代码，在阅读了其他人在我类似的情况下如何设法解决它之后，也进行了一些调整。

下面是我必须修改的代码，使其看起来像示例:

#features{
padding: 7% 15%;
background-color: white;
position: relative; 
}

.iphone-img{
transform: rotate(25deg);
position: absolute;
}

每当我尝试稍微调整向上和底部的值时，图像的位置就会发生巨大变化。我设法得到我想要的确切定位时，调整与谷歌检查元素，但当实际调整在vsc我没有设法得到相同的结果

Answer 1

您的代码中没有z-index

您需要添加它，例如:

.element-background {
position: relative;
}
.element-phone {
position: absolute;
z-index: 2;
bottom: 0;
left: 50%;
}

这段代码将把你的手机图像定位在背景的顶部，在底部，几乎在中间。