HTMLとCSSの画像のレイヤーと位置付け

私はHTMLとCSSを使って簡単なゲームを作成しています。私は路地の背景画像を持っており、この背景の上にゲームの手掛かりとして画像を追加しようとしています。私は上にそれらを配置するいくつかの困難を抱えています。HTMLとCSSの画像のレイヤーと位置付け

私が現在扱っている要素は、路地の背景画像の上に配置したいと思っている短剣のPNG画像です。どんな助けもありがとう。サイトはhere

HTMLコードです -

<body> 
    <div id="logo"> 
     <img src="images/key.jpg" width="3%" height="3%"/> 
    </div>  

    <a href="abduction.html" class="back">Back</a> 
    <a href="scene2.html" class="next">Next</a> 

    <div class="backing"> 
     <img src="images/scene1.jpg" width="600" height="600"/> 
    </div> 

    <img src="images/dagger.png" width="10%" height="10%" id="dagger" /> 

    </body> 
</html>

CSSコード -

.backing img { 
    position:relative; 
    z-index:-10; 
    float:left; 
    margin-left:12%; 
    /* box-shadow: inset 0 0 50px 50px #FFF; 
    -moz-box-shadow: inset 0 0 50px 50px #FFF; 
    -webkit-box-shadow: inset 0 0 50px 50px #FFF; */ 
    -moz-border-radius-: 50px; 
    border-radius: 50px; 
    margin-bottom:5%; 
    margin-top:1%; 
} 

.next { 
    position:relative; 
    margin-left:2%; 
    z-index:200; 
} 

.back { 
    position:relative; 
    margin-left:32%; 
    z-index:220; 

} 

#dagger { 
    position:relative; 
    z-index:300; 
}

出典

2012-01-11 Matt Murphy

あなたはそれが絵

アップデートの上に乗るように短剣をposition: absoluteしたいです

position: relative.backingに、次にposition: absoluteの両方の画像（ダガーとシーン）を上にします。

出典

2012-01-11 10:25:44 c4urself

絶対的に配置されているかのように相対的に位置決めする方法はありませんが、画面のサイズ変更に問題は生じません。たとえば、これを小さな画面で見ると？それとも絶対にやっても大丈夫だと思いますか？ –

あなたのサイトをレイアウトするために絶対的な位置を使用すると、画面のサイズ変更が問題になります。ドキュメントフローに保持される相対的なコンテナの内部にあるので、2つの位置絶対画像は重要ではありません。 – c4urself

大変ありがとうございました。 –

HTMLとCSSの画像のレイヤーと位置付け

答えて

関連する問題