CSSでイメージを適切にオーバーラップする

Question

イメージがあり、その中にgifイメージを重ねたいのですか？ イメージを別のイメージの内部に追加できますが、イメージを別のイメージの内部に正しく追加する必要があります。

どのように私はそれを行うことができますか？私は現在、使用しています

コードが

<div style="position: relative; left: 0; top: 0;"> 
          <img src="" width="225" height="140" /> 
          <img src="light bulb image" alt="member1" title="member1" 
           style="position: relative; top: 0; left: 0;"/> 
          <img src="another gif image" style="position: absolute; top: 30px; left: 70px;"/> 
         </div> 

Answer 1

私は問題の答えを得、同様の問題を持っている人は、このリンクから助けを借りると、問題を解決することができます。 画像の種類の上部を円形にして問題を解決しました。 https://www.codecademy.com/en/forum_questions/53261baf548c35ac9a010422

Answer 2

層を制御するためにpositionとz-indexを使用することです。一般にposition:absoluteの要素は親コンテナ内の他の要素の先頭に残ります。z-indexを使用すると、より多くのレイヤーを制御できます。例 - ライブたとえば

<style> 
#img2{ 
    left:20px; 
    position:absolute; 
    z-index:0; 
} 
</style> 
<div> 
    <image id="img2" src="http://images.clipartpanda.com/light-bulb-clip-art-idea-light-bulb-md.png"/> 
    <image src="https://image.freepik.com/free-vector/white-canvas-background_1053-239.jpg"/> 
</div> 

からhttps://jsbin.com/narakozeki/edit?html,output