Question

我有一个iphone模板，我有一个屏幕图像。我希望屏幕图像在iphone模板中定位。我尝试在CSS中使用position属性，但屏幕图像会显示在整个网页的顶部，而不是div。

<div class="span4" id="iphone-white">
    <img class="iphone-white-img" src="img/iphone-wht-front.png" alt="" />
    <div id="iphoneInside">
        <img class="On imgSize" id="screen1" src="img/blue.jpg" alt="" />
    </div>
</div>

CSS：

.iphone-white-img {
    max-height: 720px;
    max-width: 337px;
    width: 100%;
    margin-top: 15px;
    position: relative;
}

.imgSize
{
    max-height: 620px;
    max-width: 287px;
    width: 100%;
    position: absolute;
    top: 0;
}

Answer 1

我相信你的＃iphone-white div需要定位：亲戚。 .iphone-white-img元素不是.imgSize的父元素，这就是它不包含绝对定位元素的原因。

Answer 2

如果希望图像与其他图像重叠，则应使用z-index属性。您想要在顶部的那个应该具有更高的z-index。所以，如果在你的情况下imgSize是在iphone中，请添加

z-index: 1;

以其风格然后调整定位。而且，你不需要那个内在的div。

Answer 3

确保父级（.iphoneInside）具有位置：relative

来自Position absolute but relative to parent

将图像定位在另一个图像中？

3 个答案: