HTMLポジション画像を別の画像の上に置く

Question

画像の下から約10ピクセル離れた別の画像の上に画像を配置したいと考えています。問題は、Webブラウザが拡大縮小されたときに、以下のような方法を実行すると、上部の画像がその場所全体に移動するということです。誰かがリンクを開こうとしない場合、下の画像は相対的なものであり、上の画像は絶対的に配置されます。

CSS-Tricks text-blocks-over-image

Answer 1

あなたのフィドルが二回同じ画像を使用しているようだけど、私はあなたの答えを得るために必要な調整を行ったと思います。あなたは、イメージコンテナの内部の両方のイメージに同じスタイルを適用しました...カップルのクラスを追加することでこれが解決されました（または擬似セレクタを使用することもできます）。

将来的には、あなたの質問のコードをコミュニティに役立つように質問に直接入れることをおすすめします。あなたが元に戻ってこの質問に元のコードを入れることができれば、将来この質問/回答につまずく人を助けるでしょう。

HTML：

<div> 
    <div class="image-container"> 
    <img class="firstimg" src="http://lorempixel.com/1000/500"> 
    <a class="social-image" href="https://www.instagram.com"> 
      <img class="secondimg" src="http://lorempixel.com/1000/500"> 
     </a> 
    </div> 
</div> 

CSS：

.image-container { 
    position: relative; 
} 

.image-container .firstimg { 
    width: 100%; 
} 

.social-image img { 
    position: absolute; 
    /* left: 3em; */ 
    top: 70px; 
    width: 100%; 
    z-index:9999; 
} 

Answer 2

ああ、私は今問題のより良い理解を持っていると思う...何leftとtop属性の両方のためのパーセンテージを使ってはどうですか？これは、ブラウザが拡大縮小されたときに間隔を一定に保つように見えます。

HTML：

<div> 
    <div class="image-container"> 
    <img src="http://lorempixel.com/1000/500"> 

    <a class="social-image" href="https://www.instagram.com"> 
     <img src="http://lorempixel.com/1000/500"> 
    </a> 
    </div> 
</div> 

CSS：

.image-container { 
    position: relative; 
} 

.image-container img { 
    width: 100%; 
} 

.social-image { 
    position: absolute; 
    left: 5%; 
    top: 5%; 
    width: 100%; 
}