画像の位置を他の画像の上に置いておく

Question

2枚の画像があり、1枚はもう一方の画像の上に置かれ、1枚の画像のように見えます。私はこのようにそれをしなかった理由は、私がイメージ2.

をアニメーション化したいので、私は画像1の上に画像2を配置した、すべてが正常に見えるです。問題は、私はこれからコンポーネントを作成して、いくつかの他の場所で同じCSS（高さと幅の変更）とhtmlを再利用することになります。

私のスタイルは1つのサイズに対して機能しますが、拡大または縮小するとすぐにイメージ2が配置されます。

これは

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

と私のCSS

.container { 
display:block; 
margin: 0 auto; 
margin-top: 30px; 
margin-bottom: 40px; 
width:43%; // width of the container will change 
} 
.image2 { 
margin-top: -50px; 
margin-right: 27px; 
float:right; 
width: 10%; 
} 

は画像2を配置し、サイズが変更されていても、その位置でそれを維持する方法がありますが、私のhtmlです。

もしそれがもっと明確になるのであれば、両方の画像が一緒に私のアプリケーションのロゴを構成します。 CSS3におけるz-indexプロパティについて

Answer 1

検索：

Zindex on W3School

それはあなたがこのような何かを試すことができ

Answer 2

が必要なものをやります。

ここでは、最初のイメージは絶対位置の同じ要素内の相対位置にある必要があります。その後、2番目の画像のbottomプロパティとrightプロパティを設定できます。

.container{ 
 
    width:800px; 
 
    height:800px; 
 
    padding:50px; 
 
} 
 
.img1{ 
 
    position:relative; 
 
    width:300px; 
 
    height:100px; 
 
    background-color:red; 
 
    transition: all 1s; 
 
} 
 

 
.img2{ 
 
    width:100px; 
 
    height:100px; 
 
    background-color:yellow; 
 
    border-radius:50px; 
 
    transition:all 1s; 
 
    position:absolute; 
 
    top:-90px; 
 
    right:20px; 
 
} 
 
.container:hover .img1{ 
 
    width:400px; 
 
    height:150px; 
 
} 
 

 
.container:hover .img2{ 
 
    width:150px; 
 
    height:150px; 
 
    border-radius:100px; 
 
}

<div class="container"> 
 
    <div class="img1"> 
 
     <div class="img2"> 
 

 
     </div> 
 
    </div> 
 
</div>