Bagaimana cara memposisikan satu gambar di atas yang lain dalam HTML?

Saya seorang pemula di pemrograman rails, berusaha menampilkan banyak gambar pada sebuah halaman. Beberapa gambar diletakkan di atas yang lain. Untuk membuatnya sederhana, katakan saya ingin kotak biru, dengan kotak merah di sudut kanan atas kotak biru (tetapi tidak ketat di sudut). Saya mencoba menghindari pengomposisian (dengan ImageMagick dan sejenisnya) karena masalah kinerja.

Saya hanya ingin posisi gambar yang tumpang tindih relatif satu sama lain.

Sebagai contoh yang lebih sulit, bayangkan odometer ditempatkan di dalam gambar yang lebih besar. Untuk enam digit, saya perlu menggabungkan satu juta gambar yang berbeda, atau melakukan semuanya dengan cepat, di mana semua yang diperlukan adalah menempatkan enam gambar di atas yang lain.

Ok, setelah beberapa waktu, inilah tujuan saya:

.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>

Sebagai solusi paling sederhana. Itu adalah:

Buat div relatif yang ditempatkan di aliran halaman; tempatkan gambar dasar terlebih dahulu sebagai relatif sehingga div tahu seberapa besar seharusnya; menempatkan overlay sebagai absolut relatif ke kiri atas gambar pertama. Kuncinya adalah untuk mendapatkan kerabat dan absolut yang benar.

Ini adalah tampilan tulang punggung pada apa yang telah saya lakukan untuk mengapung satu gambar ke gambar lainnya.

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">

Sumber

Berikut kode yang dapat memberi Anda ide:

<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

Saya menduga bahwa solusi Espo mungkin tidak nyaman karena mengharuskan Anda untuk memposisikan kedua gambar secara mutlak. Anda mungkin ingin yang pertama memposisikan dirinya dalam aliran.

Biasanya, ada cara alami untuk melakukannya yaitu CSS. Anda menempatkan posisi: relatif pada elemen wadah, dan kemudian benar-benar menempatkan anak-anak di dalamnya. Sayangnya, Anda tidak dapat menempatkan satu gambar di dalam yang lain. Itu sebabnya saya membutuhkan div kontainer. Perhatikan bahwa saya membuatnya menjadi mengambang agar autofit sesuai isinya. Membuatnya ditampilkan: inline-block secara teoritis juga bisa berfungsi, tetapi dukungan browser buruk di sana.

EDIT: Saya menghapus atribut ukuran dari gambar untuk menggambarkan poin saya dengan lebih baik. Jika Anda ingin gambar kontainer memiliki ukuran default dan Anda tidak tahu ukurannya sebelumnya, Anda tidak dapat menggunakan trik latar belakang . Jika Anda melakukannya, itu cara yang lebih baik.

Satu masalah yang saya perhatikan yang dapat menyebabkan kesalahan adalah bahwa dalam jawaban rrichter, kode di bawah ini:

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

harus menyertakan unit px dalam style misalnya.

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

Selain itu, jawabannya bekerja dengan baik. Terima kasih.

Anda benar-benar dapat memposisikan pseudo elementsrelatif terhadap elemen induknya.

Ini memberi Anda dua lapisan tambahan untuk dimainkan untuk setiap elemen - sehingga memposisikan satu gambar di atas yang lain menjadi mudah - dengan markup semantik dan semantik (tanpa div kosong dll).

markup:

<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;
}

Inilah DEMO LANGSUNG

Cara mudah untuk melakukannya adalah dengan menggunakan background-image lalu cukup meletakkan <img> di elemen itu.

Cara lain untuk melakukannya adalah menggunakan lapisan css. Ada banyak sumber daya yang tersedia untuk membantu Anda dengan ini, cukup cari lapisan css .

Gaya sejajar hanya untuk kejelasan di sini. Gunakan lembar gaya CSS nyata.

<!-- 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>

Mungkin agak terlambat tetapi untuk ini Anda dapat melakukan:

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>

KELANCANGAN

// 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: Tidak terlalu berlebihan, tetapi kode Anda tidak valid. HTML widthdan heightatribut tidak memungkinkan untuk unit; Anda cenderung memikirkan CSS width:dan height:properti. Anda juga harus memberikan jenis konten ( text/css; lihat kode Espo) dengan <style>tag.

<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>

Meninggalkan px;di widthdan heightatribut dapat menyebabkan mesin rendering untuk balk.

Buat div relatif yang ditempatkan di aliran halaman; tempatkan gambar dasar terlebih dahulu sebagai relatif sehingga div tahu seberapa besar seharusnya; menempatkan overlay sebagai absolut relatif ke kiri atas gambar pertama. Kuncinya adalah untuk mendapatkan kerabat dan absolut yang benar.