0

iphone-template があり、画面イメージがあります。画面イメージを iphone テンプレート内に配置したい。CSS で position プロパティを使用してみましたが、画面イメージが div ではなく Web ページ全体の上部に表示されます。

<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 は position:relative である必要があると思います。.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) に position: relative があることを確認してください

From Position 絶対的だが親に対して相対的

于 2013-07-11T16:11:38.877 に答える