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

250

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.

rrichter
sumber
1
Anda bisa melakukan odometer dengan satu gambar menggunakan sprite
Jason

Jawaban:

432

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.

rrichter
sumber
1
Ini solusi yang elegan. Jika "a" memiliki ID adan "b" memiliki ID b, bisakah kode JavaScript ini (pengaturan xdan yberdasarkan perhitungan) berfungsi untuk mengubah posisi b?
DDPWNAGE
1
Kiri: 0 sangat penting! Lupa dan tidak berfungsi di Safari. Butuh waktu beberapa saat untuk mengetahuinya.
maracuja-jus
2
Saat menjalankan cuplikan kode, satu gambar tidak ditampilkan di atas yang lain.
kojow7
@ kojow7 Baru saja memperbarui cuplikan kode untuk menunjukkannya di atas yang lain. :-)
Craigo
1
@ Me_developer Anda tidak akan melakukannya dengan cara ini. Anda akan menggunakan margin otomatis. w3schools.com/howto/howto_css_image_center.asp
Craigo
74

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

Espo
sumber
40

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.

buti-oxa
sumber
1
Ini adalah solusi terbaik bagi saya karena tidak perlu menentukan lebar dan tinggi gambar Anda dan ini akan menghasilkan lebih banyak dapat digunakan kembali.
Iman Mohamadi
11

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.

Wez
sumber
8

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

Danield
sumber
5

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 .

Chris Bartow
sumber
5

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>
FlySwat
sumber
3

Mungkin agak terlambat tetapi untuk ini Anda dapat melakukan:

masukkan deskripsi gambar di sini

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;
    }
  }
}
Elkin Angulo
sumber
0

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

Sören Kuklau
sumber
0

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.

Pallavi Singh
sumber
Saya pikir contoh kode yang mungkin dapat membantu pembaca masa depan dari jawaban ini.
entpnerd