0

我有一个 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;
}
4

3 回答 3

1

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

于 2013-07-11T16:12:04.727 回答
0

如果您希望一个图像与另一个图像重叠，您应该使用 z-index 属性。你想在上面的那个应该有更高的 z-index。因此，如果在您的情况下 imgSize 在 iphone 内部，请添加

z-index: 1;

到它的风格，然后调整定位。而且，你不需要那个内部 div。

于 2013-07-11T16:02:19.127 回答
0

确保父 (.iphoneInside) 具有位置：相对

从绝对位置但相对于父级

于 2013-07-11T16:11:38.877 回答