I'm seorang pemula di rel pemrograman, mencoba untuk menunjukkan beberapa gambar pada halaman. Beberapa gambar adalah untuk berbaring di atas orang lain. Untuk membuatnya sederhana, katakanlah saya ingin persegi biru, dengan sebuah kotak merah di pojok kanan atas dari kotak biru (tapi tidak ketat di sudut). Saya mencoba untuk menghindari compositing (dengan ImageMagick dan sejenisnya) karena masalah kinerja.
Aku hanya ingin posisi gambar yang tumpang tindih relatif terhadap satu sama lain.
Sebagai lebih sulit contoh, bayangkan sebuah odometer ditempatkan di dalam gambar yang lebih besar. Selama enam digit, saya akan perlu untuk komposit juta gambar yang berbeda, atau melakukan semuanya dengan cepat, di mana semua yang diperlukan adalah untuk menempatkan enam gambar di atas yang lain.
Ok, setelah beberapa waktu, di sini's apa yang saya mendarat di:
.parent {
position: relative;
top: 0;
left: 0;
}
.image1 {
position: relative;
top: 0;
left: 0;
}
.image2 {
position: absolute;
top: 30px;
left: 70px;
}
<div class="parent">
<img class="image1" src="https://placehold.it/50" />
<img class="image2" src="https://placehold.it/100" />
</div>
Sebagai solusi yang paling sederhana. Yaitu:
Buat yang relatif div yang ditempatkan di aliran halaman; tempat gambar dasar pertama sebagai relatif sehingga div tahu seberapa besar itu harus; tempat lapisan sebagai absolut relatif terhadap sudut kiri atas dari gambar pertama. Kuncinya adalah untuk mendapatkan kerabat dan mutlak benar.
Ini adalah barebone melihat apa yang saya've dilakukan untuk mengapung satu gambar di atas yang lain.
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">
Berikut ini's kode yang dapat memberikan anda ide-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][1]
Saya menduga bahwa Espo's solusi mungkin tidak nyaman karena hal ini membutuhkan anda untuk posisi kedua gambar sama sekali. Anda mungkin ingin yang pertama untuk posisi dirinya dalam aliran.
Biasanya, ada cara alami untuk melakukan itu adalah CSS. Anda menempatkan position: relative pada elemen kontainer, dan kemudian benar-benar posisi anak-anak di dalamnya. Sayangnya, anda tidak bisa menempatkan satu gambar di dalam yang lain. Yang's mengapa saya membutuhkan wadah div. Perhatikan bahwa saya membuat pelampung untuk membuatnya autofit untuk isinya. Sehingga display: inline-block secara teoritis harus bekerja dengan baik, tetapi dukungan browser yang miskin di sana.
EDIT: saya dihapus atribut ukuran dari gambar untuk mengilustrasikan poin saya lebih baik. Jika anda ingin wadah gambar yang memiliki ukuran standar dan anda don't tahu ukuran terlebih dahulu, anda tidak dapat menggunakan latar belakang trick. Jika anda melakukannya, itu adalah cara yang lebih baik untuk pergi.
Salah satu masalah yang saya perhatikan yang dapat menyebabkan kesalahan adalah bahwa dalam rrichter's jawaban, kode di bawah ini:
<img src="b.jpg" style="position: absolute; top: 30; left: 70;"/>
harus mencakup px unit dalam gaya misalnya.
<img src="b.jpg" style="position: absolute; top: 30px; left: 70px;"/>
Lain dari itu, jawabannya bekerja dengan baik. Terima kasih.
Anda dapat benar-benar posisi pseudo elemen
relatif terhadap mereka elemen induk.
Ini memberi anda dua lapisan ekstra untuk bermain dengan untuk setiap elemen - jadi posisi satu gambar di atas yang lain menjadi mudah dengan minimal dan semantik markup (tidak kosong div 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;
}
Berikut ini's [DEMO][1]
Inline style hanya untuk kejelasan di sini. Menggunakan CSS stylesheet.
<!-- 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>
Cara mudah untuk melakukannya adalah dengan menggunakan latar belakang-gambar yang kemudian hanya menempatkan <img> elemen tersebut.
Cara lain untuk melakukan ini adalah dengan menggunakan css lapisan. Ada banyak sumber daya yang tersedia untuk membantu anda dengan ini, hanya mencari css lapisan.
Mungkin sedikit terlambat, tapi 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>
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: Tidak akan bertele-tele, tetapi kode yang tidak valid. HTML width
dan height
atribut tidak memungkinkan untuk unit; anda're cenderung berpikir CSS lebar:
dan height:
properties. Anda juga harus memberikan content-type (text/css
; lihat Espo's code) 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;
pada width
dan height
atribut dapat menyebabkan mesin rendering untuk menolak.