HTMLで画像を別の画像の上に配置するにはどうすればよいですか？

私はRailsプログラミングの初心者で、ページに多くの画像を表示しようとしています。一部の画像は他の画像の上に配置されます。簡単にするために、青い四角形の右上隅に赤い四角形が表示されている（ただし、角がきついではない）青い四角形が必要だとします。パフォーマンスの問題のため、（ImageMagickなどで）合成を回避しようとしています。

重なり合う画像を相対的に配置したいだけです。

より難しい例として、より大きな画像の中に配置された走行距離計を想像してみてください。6桁の場合、100万の異なる画像を合成するか、すべてをオンザフライで実行する必要があります。必要なのは、6つの画像を他の画像の上に配置することだけです。

わかりました、しばらくして、これが私が上陸したものです：

.parent {
  position: relative;
  top: 0;
  left: 0;
}
.image1 {
  position: relative;
  top: 0;
  left: 0;
  border: 1px red solid;
}
.image2 {
  position: absolute;
  top: 30px;
  left: 30px;
  border: 1px green solid;
}

<div class="parent">
  <img class="image1" src="https://placehold.it/50" />
  <img class="image2" src="https://placehold.it/100" />
</div>

最も簡単な解決策として。あれは：

ページのフローに配置される相対divを作成します。最初にベースイメージを相対として配置し、divがどのくらいの大きさになるかを認識できるようにします。オーバーレイは、最初の画像の左上を基準にして絶対的に配置します。コツは、親族と絶対人を正しくすることです。

これは、あるイメージを別のイメージの上にフロートさせるために私が行ったものを最低限見たものです。

img {
  position: absolute;
  top: 25px;
  left: 25px;
}
.imgA1 {
  z-index: 1;
}
.imgB1 {
  z-index: 3;
}

<img class="imgA1" src="https://placehold.it/200/333333">
<img class="imgB1" src="https://placehold.it/100">

ソース

これはあなたにアイデアを与えるかもしれないコードです：

<style>
.containerdiv { float: left; position: relative; } 
.cornerimage { position: absolute; top: 0; right: 0; } 
</style>

<div class="containerdiv">
    <img border="0" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" alt=""">
    <img class="cornerimage" border="0" src="http://www.gravatar.com/avatar/" alt="">
<div>

JSFiddle

私は疑うことエスポーのソリューション、それは絶対に両方の画像を配置する必要があるため不便かもしれません。最初のものをフロー内に配置したい場合があります。

通常、それを行う自然な方法はCSSです。コンテナー要素に位置を配置します：相対で子を絶対に配置します。残念ながら、ある画像を別の画像内に配置することはできません。そのため、コンテナーdivが必要でした。フロートにして、コンテンツに自動フィットさせることに注意してください。表示する：インラインブロックも理論的には機能するはずですが、ブラウザのサポートは不十分です。

編集：私のポイントをよりよく説明するために、画像からサイズ属性を削除しました。コンテナイメージをデフォルトのサイズにしたいが、サイズが事前にわからない場合は、バックグラウンドトリックを使用できません。もしそうなら、それは行くためのより良い方法です。

エラーが発生する可能性があることに気付いた1つの問題は、リヒターの答えにある以下のコードです。

<img src="b.jpg" style="position: absolute; top: 30; left: 70;"/>

たとえば、スタイル内にpxユニットを含める必要があります。

<img src="b.jpg" style="position: absolute; top: 30px; left: 70px;"/>

それ以外は、答えはうまくいきました。ありがとう。

絶対配置できます pseudo elements親要素に対してます。

これにより、すべての要素を操作するための2つの追加レイヤーが得られます。つまり、最小限のセマンティックマークアップ（空のdivなどなし）で、ある画像を別の画像の上に配置することが簡単になります。

マークアップ：

<div class="overlap"></div>

css：

.overlap
{
    width: 100px;
    height: 100px;
    position: relative;
    background-color: blue;
}
.overlap:after
{
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    top: 5px;
    left: 5px;
    background-color: red;
}

こちらがLIVE DEMOです

簡単な方法は、background-imageを使用して、その要素に<img>を置くだけです。

もう1つの方法は、CSSレイヤーを使用することです。これに役立つリソースがたくさんあります。CSSレイヤーを検索してください。

ここでは、わかりやすくするためだけにインラインスタイルを使用しています。実際のCSSスタイルシートを使用します。

<!-- First, your background image is a DIV with a background 
     image style applied, not a IMG tag. -->
<div style="background-image:url(YourBackgroundImage);">
    <!-- Second, create a placeholder div to assist in positioning 
         the other images. This is relative to the background div. -->
    <div style="position: relative; left: 0; top: 0;">
        <!-- Now you can place your IMG tags, and position them relative 
             to the container we just made -->   
        <img src="YourForegroundImage" style="position: relative; top: 0; left: 0;"/>
    </div>
</div>

少し遅れる可能性がありますが、これを行うには次のようにします。

HTML

<!-- html -->
<div class="images-wrapper">
  <img src="images/1" alt="image 1" />
  <img src="images/2" alt="image 2" />
  <img src="images/3" alt="image 3" />
  <img src="images/4" alt="image 4" />
</div>

SASS

// In _extra.scss
$maxImagesNumber: 5;

.images-wrapper {
  img {
    position: absolute;
    padding: 5px;
    border: solid black 1px;
  }

  @for $i from $maxImagesNumber through 1 {
    :nth-child(#{ $i }) {
      z-index: #{ $maxImagesNumber - ($i - 1) };
      left: #{ ($i - 1) * 30 }px;
    }
  }
}

@ buti-oxa：面倒ではありませんが、コードは無効です。HTML widthとheight属性はユニットを許可しません。あなたはおそらくCSS width:とheight:プロパティについて考えているでしょう。またtext/css、<style>タグでcontent-type（; Espoのコードを参照）も提供する必要があります。

<style type="text/css"> 
.containerdiv { float: left; position: relative; } 
.cornerimage { position: absolute; top: 0; right: 0; } 
</style>

<div class="containerdiv">
    <img border="0" src="http://www.gravatar.com/avatar/" alt="" width="100" height="100">
    <img class="cornerimage" border="0" src="http://www.gravatar.com/avatar/" alt="" width="40" height="40">
<div>

去るpx;にwidthし、height属性は、ボークにレンダリングエンジンが発生する可能性があります。

ページのフローに配置される相対divを作成します。最初にベースイメージを相対として配置し、divがどのくらいの大きさになるかを認識できるようにします。オーバーレイは、最初の画像の左上を基準にして絶対的に配置します。コツは、親族と絶対人を正しくすることです。