CSS：子供（img）が背景（img）の上に正しく配置されているようにしてください

Question

私は小さな透明なGIFがあると言います。はい、私は、写真の少しの部分がアニメーション化されているように、写真の上にシームレスな小さなアニメーションが欲しいと推測したかもしれません。

これは純粋なCSSではあまりにも難しいですか？私はすでにjsでそれをやり始めています、ちょうどCSSと複雑に見えます。だから、私はコードに移りながら、誰かが偶然、ファンキーなCSS方法論を持っていますか？

何かのように試してみましたが、何らかの理由でfloater画像がbg画像を含む親divではなく、ブラウザ（可視）の割合で拡大/縮小されます。

<div id="bg-image"> 
     <div class="bg-container"> 
      <img class="photo" src="../images/bg_artist.jpg" alt=""/> 
      <img class="floater" src="../images/twitter.png" alt="" /> 
     </div> 
    </div> 

はちょうど私が子供の画像が右下に表示するふり：

#bg-image .container 
{ 
    width:102%; 
    margin-left:-10px; 
} 


#bg-image .photo 
{ 
    width:102%; 
    margin-left:-10px; 
} 

#bg-image .floater { 
    position:fixed; 
    left:90%; 
    top:90%; 
} 

まあ、周りfutzing後、JSのソリューションは非常に簡単です：

var floater = document.getElementById("floater"); 
var photo = document.getElementById("bg-photo"); 

floater.style.left = photo.width * .9 +"px"; 
floater.style.top = photo.height * .5 + "px"; 

申し訳ありませんが、私はそれをjsfiddleに入れましたが、ブラウザ全体を扱うので難しいです。

Answer 1

最終的な振る舞いをしたいのですが少し不明ですが、this has the images scaling and staying located in relation to each otherです。

HTML

<div id="bg-image"> 
    <img class="photo" src="path/bkgimage.png" alt=""/> 
    <img class="floater" src="path/floatimage.png" alt="" /> 
</div> 

CSS

#bg-image { 
    position: absolute; 
    width:100%; 
    left: 0; 
    top: 0; 
} 


#bg-image .photo { 
    width:100%; 
} 

#bg-image .floater { 
    position:absolute; 
    width: 10%; 
    height: 10%; 
    bottom: 0; 
    right: 0; 
}