HTML、CSS - イメージ内部のイメージ、それを行う方法？

Question

Iは、HTMLコードのこの部分を有する：

<div> 
    <div> 
    <image src="image-inside-pic-png.png" alt=""> 
    </div> 
    <image src="pic.png" alt="" /> 
</div> 

pic.png（300×300ピクセル）が主画像です。 image-inside-pic-png.png（20x20ピクセル）を内部に入れたいと思います。私が適用するときポジション：絶対;小さな画像にと表示されています。 どちらかのサイズを変更すると、もう機能しません。

だから私の質問は、私は大きな画像で常に小さな画像を移動することができますどのように、である - そしてこの小さな画像は大きな画像の右端から常に15ピクセル上からと30pxでしょうか？

は、私は、これは動作するはずだと思うの助け

Answer 1

マークアップを変更することなく、これは、たとえば次のように達成できます。最も外側のdiv要素にdisplay:inline-blockを使用して（それは、利用可能な幅の100％延長しないであろう）

このバイオリンを見て、最も外側のDIVとサムネイル用の位置relative + absolute：http://jsfiddle.net/cRqhT/3/境界と画像サイズが単純

に対して定義され

Answer 2

をありがとう：

HTML：

<div> 
    <img src="image-inside-pic-png.png" alt="" class="inner-image"/> 
    <img src="pic.png" alt="" /> 
</div> 

CSS：とにかく

div { 
    position: relative; 
} 

.inner-image { 
    position: absolute; 
    top: 15px; 
    right: 30px; 
} 

、必ずでこれを行う必要がある作りますHTML。 PhotoshopやGimpを使って簡単に画像を編集する方がいいでしょう。それとも、スタイリング目的のためのイメージなのでしょうか？それから、CSSを使うべきです。

Answer 3

position：relatvieを使用する1つのdivに両方の画像を配置し、position：absoluteを画像に適用し、必要に応じて値を調整します。