8

画像の上に画像を表示するコードを作成しました。コードは次のとおりです。

<style type="text/css"> 
.imgA1 { position:absolute; top: 0px; left: 0px; z-index: 1; } 
.imgB1 { position:absolute; top: 70px; left: 100px; z-index: 3; } 
</style>

<img class="imgA1" src="image1.png">
<img class="imgB1" src="image2.png">

今、私はこれをブロガーサイトの投稿に追加しました. 画像は画面に合わせて配置されているようです。これらの画像は次々と表示されましたが、表示させたい場所にコードを追加しても、画面の左端に配置されていました。投稿のいくつかのテキストの下にそれらを表示したいと思います。位置タグの「絶対」値には問題があると思います。しかし、これを克服する方法がわかりません。

4

2 に答える 2

20

relativeそれらを要素内にネストします。

<style type="text/css"> 
.container { position:relative; }
.imgA1 { position:absolute; top: 0px; left: 0px; z-index: 1; } 
.imgB1 { position:absolute; top: 70px; left: 100px; z-index: 3; } 
</style>

<div class="container">
<img class="imgA1" src="image1.png">
<img class="imgB1" src="image2.png">
</div>

http://jsfiddle.net/nUPsh/1/

この記事では、CSSpositionプロパティについて非常によく説明しています。

http://css-tricks.com/absolute-positioning-inside-relative-positioning/

于 2012-11-23T18:34:43.690 に答える