Wie positioniere ich ein Bild in HTML über einem anderen?

Ich bin ein Anfänger in der Schienenprogrammierung und versuche, viele Bilder auf einer Seite anzuzeigen. Einige Bilder sollen auf anderen liegen. Nehmen wir zur Vereinfachung an, ich möchte ein blaues Quadrat mit einem roten Quadrat in der oberen rechten Ecke des blauen Quadrats (aber nicht eng in der Ecke). Ich versuche, Compositing (mit ImageMagick und ähnlichem) aufgrund von Leistungsproblemen zu vermeiden.

Ich möchte nur überlappende Bilder relativ zueinander positionieren.

Stellen Sie sich als schwierigeres Beispiel einen Kilometerzähler vor, der sich in einem größeren Bild befindet. Für sechs Ziffern müsste ich eine Million verschiedene Bilder zusammensetzen oder alles im laufenden Betrieb erledigen, wobei nur die sechs Bilder über dem anderen platziert werden müssen.

Ok, nach einiger Zeit bin ich auf Folgendes gelandet:

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

Als einfachste Lösung. Das ist:

Erstellen Sie ein relatives Div, das im Seitenfluss platziert wird. Platzieren Sie das Basisbild zuerst als relativ, damit der Div weiß, wie groß es sein sollte. Platzieren Sie die Überlagerungen als absolut relativ zur oberen linken Ecke des ersten Bildes. Der Trick besteht darin, die Verwandten und Absoluten richtig zu machen.

Dies ist ein Barebone-Blick auf das, was ich getan habe, um ein Bild über ein anderes zu schweben.

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

Quelle

Hier ist Code, der Ihnen Ideen geben kann:

<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

Ich vermute, dass die Lösung von Espo unpraktisch sein kann, da Sie beide Bilder unbedingt positionieren müssen. Möglicherweise möchten Sie, dass sich der erste im Fluss positioniert.

Normalerweise gibt es einen natürlichen Weg, dies zu tun, nämlich CSS. Sie setzen position: relative auf das Containerelement und positionieren dann Kinder absolut darin. Leider können Sie nicht ein Bild in ein anderes einfügen. Deshalb brauchte ich Container Div. Beachten Sie, dass ich es zu einem Float gemacht habe, damit es automatisch an seinen Inhalt angepasst wird. Anzeige: Inline-Block sollte theoretisch auch funktionieren, aber die Browserunterstützung ist dort schlecht.

BEARBEITEN: Ich habe Größenattribute aus den Bildern gelöscht, um meinen Standpunkt besser zu veranschaulichen. Wenn Sie möchten, dass das Containerbild seine Standardgrößen hat und Sie die Größe vorher nicht kennen, können Sie den Hintergrundtrick nicht verwenden . Wenn Sie dies tun, ist es ein besserer Weg.

Ein Problem, das mir aufgefallen ist und Fehler verursachen kann, ist der folgende Code in der Antwort von rrichter:

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

sollte die px-Einheiten innerhalb des Stils enthalten, z.

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

Davon abgesehen hat die Antwort gut funktioniert. Vielen Dank.

Sie können absolut pseudo elementsrelativ zu ihrem übergeordneten Element positionieren .

Dies gibt Ihnen zwei zusätzliche Ebenen, mit denen Sie für jedes Element spielen können - so wird das Positionieren eines Bildes über einem anderen einfach - mit minimalem und semantischem Markup (keine leeren Divs usw.).

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

Hier ist eine LIVE DEMO

Der einfache Weg, dies zu tun, besteht darin, ein Hintergrundbild zu verwenden und dann einfach ein <img> in dieses Element einzufügen.

Die andere Möglichkeit ist die Verwendung von CSS-Ebenen. Es gibt eine Menge Ressourcen, die Ihnen dabei helfen. Suchen Sie einfach nach CSS-Ebenen .

Inline-Stil nur zur Klarheit hier. Verwenden Sie ein echtes 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>

Es mag etwas spät sein, aber dafür können Sie Folgendes tun:

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: Nicht umständlich zu sein, aber dein Code ist ungültig. HTML widthund heightAttribute lassen keine Einheiten zu. Sie denken wahrscheinlich an das CSS width:und die height:Eigenschaften. Sie sollten text/cssdem <style>Tag auch einen Inhaltstyp ( siehe Espos Code) geben .

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

Das Belassen px;der Attribute widthund heightkann dazu führen, dass eine Rendering-Engine blockiert.

Erstellen Sie ein relatives Div, das im Seitenfluss platziert wird. Platzieren Sie das Basisbild zuerst als relativ, damit der Div weiß, wie groß es sein sollte. Platzieren Sie die Überlagerungen als absolut relativ zur oberen linken Ecke des ersten Bildes. Der Trick besteht darin, die Verwandten und Absoluten richtig zu machen.