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

250

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.

Richter
quelle
1
Sie könnten den Kilometerzähler mit einem Bild mit Sprites machen
Jason

Antworten:

432

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.

Richter
quelle
1
Es ist eine elegante Lösung. Wenn "a" eine ID von aund "b" eine ID von hätte b, könnte dieser JavaScript-Code (Einstellung xund ynach einiger Berechnung) zum Ändern der Position von funktionieren b?
DDPWNAGE
1
Links: 0 ist sehr wichtig! Ich habe es vergessen und es hat in Safari nicht funktioniert. Ich habe eine Weile gebraucht, um es herauszufinden.
Maracuja-Saft
2
Wenn Sie das Code-Snippet ausführen, wird das eine Bild nicht über dem anderen angezeigt.
Kojow7
@ kojow7 Habe gerade das Code-Snippet aktualisiert, um sie übereinander anzuzeigen. :-)
Craigo
1
@Me_developer Du würdest es nicht so machen. Sie würden automatische Ränder verwenden. w3schools.com/howto/howto_css_image_center.asp
Craigo
74

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

Espo
quelle
40

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.

Buti-Oxa
quelle
1
Dies ist die beste Lösung für mich, da Sie die Breite und Höhe Ihrer Bilder nicht angeben müssen und dies zu einer wesentlich besseren Wiederverwendbarkeit führt.
Iman Mohamadi
11

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.

Wez
quelle
8

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

Danield
quelle
5

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 .

Chris Bartow
quelle
5

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

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

Geben Sie hier die Bildbeschreibung ein

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

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

Sören Kuklau
quelle
0

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.

Pallavi Singh
quelle
Ich denke, dass ein mögliches Codebeispiel zukünftigen Lesern dieser Antwort helfen könnte.
Entpnerd