HTML'de bir resmi diğerinin üzerine nasıl konumlandırabilirim?

Rails programlamada yeni başlıyorum, bir sayfada birçok resim göstermeye çalışıyorum. Bazı görüntüler diğerlerinin üzerine serilir. Basitleştirmek için, mavi karenin sağ üst köşesinde kırmızı bir kare olan (ancak köşede sıkı değil) mavi bir kare istediğimi söyleyin. Performans sorunları nedeniyle (ImageMagick ve benzeri ile) kompozisyon kaçınmak çalışıyorum.

Üst üste binen görüntüleri birbirine göre konumlandırmak istiyorum.

Daha zor bir örnek olarak, daha büyük bir görüntünün içine yerleştirilmiş bir kilometre sayacı düşünün. Altı basamak için, bir milyon farklı görüntüyü birleştirmem ya da hepsini yapmam gerekiyordu, burada gereken tek şey altı görüntüyü diğerinin üzerine yerleştirmektir.

Tamam, bir süre sonra, indiğim şey:

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

En basit çözüm olarak. Yani:

Sayfanın akışına yerleştirilmiş göreli bir div oluşturun; div'ın ne kadar büyük olması gerektiğini bilmesi için temel görüntüyü göreceli olarak yerleştirin; yer paylaşımlarını ilk görüntünün sol üst kısmına göre mutlak olarak yerleştirin. İşin püf noktası akrabaları ve mutlakları düzeltmektir.

Bu bir barebone, bir görüntüyü diğerinin üzerinde süzmek için yaptığım şeye bakmaktadır.

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

Kaynak

İşte size fikir verebilecek kod:

<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

Espo'nun çözümünden şüpheleniyorum sakıncalı olabileceğinden çünkü her iki görüntüyü de kesinlikle konumlandırmanızı gerektiriyor. İlkinin kendisini akışa yerleştirmesini isteyebilirsiniz.

Genellikle, bunu yapmanın doğal bir yolu vardır CSS. Konum: konteyner elemanına göre konumlandırın ve sonra çocukları kesinlikle içine yerleştirin. Ne yazık ki, bir görüntüyü diğerinin içine koyamazsınız. Bu yüzden konteyner div'e ihtiyacım vardı. İçeriğine otomatik sığdırmak için bir şamandıra yaptığımı fark ettim. Görüntülemeyi sağlamak: satır içi blok teorik olarak da çalışmalıdır, ancak tarayıcı desteği zayıftır.

DÜZENLEME: Daha iyi göstermek için resimlerden boyut niteliklerini sildim. Kapsayıcı görüntüsünün varsayılan boyutlara sahip olmasını istiyorsanız ve boyutu önceden bilmiyorsanız, arka plan hilesini kullanamazsınız . Eğer yaparsan, gitmenin daha iyi bir yoludur.

Hatalara neden olabileceğini fark ettiğim bir sorun, rrichter'ın cevabında aşağıdaki kod:

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

stil içindeki piksel birimlerini içermelidir örn.

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

Bunun dışında, cevap iyi çalıştı. Teşekkürler.

Kesinlikle konumlandırabilirsiniz pseudo elementsÜst öğelerine göre .

Bu, her öğe için oynayabileceğiniz iki ekstra katman sağlar - böylece bir görüntüyü diğerinin üzerine yerleştirmek kolaylaşır - minimum ve anlamsal işaretleme (boş div'ler vb. Olmadan).

biçimlendirme:

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

İşte CANLI BİR DEMO

Bunu yapmanın kolay yolu, arka plan görüntüsünü kullanmak ve daha sonra bu öğeye bir <img> koymaktır.

Bunu yapmanın diğer yolu css katmanlarını kullanmaktır. Bu konuda size yardımcı olacak bir ton kaynak var, sadece css katmanlarını arayın .

Satır içi stil sadece burada netlik için. Gerçek bir CSS stil sayfası kullanın.

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

Biraz geç olabilir ama bunun için şunları yapabilirsiniz:

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>

SUKDÖ'nün

// 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: Bilgiçlik taslamadığı halde kodunuz geçersiz. HTML widthve heightözellikler birimlere izin vermez; muhtemelen CSS width:ve height:özellikleri düşünüyorsunuz . Etiketi text/cssile birlikte bir içerik türü ( ; bkz. Espo'nun kodu) da sağlamalısınız <style>.

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

Ayrılma px;içinde widthve heightnitelikler balk bir oluşturma motoru neden olabilir.

Sayfanın akışına yerleştirilmiş göreli bir div oluşturun; div'ın ne kadar büyük olması gerektiğini bilmesi için temel görüntüyü göreceli olarak yerleştirin; yer paylaşımlarını ilk görüntünün sol üst kısmına göre mutlak olarak yerleştirin. İşin püf noktası akrabaları ve mutlakları düzeltmektir.