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

Question

Ich bin ein Anfänger in der Rails-Programmierung und versuche, viele Bilder auf einer Seite anzuzeigen.Einige Bilder sollen über andere gelegt werden.Um es einfach zu machen: Angenommen, ich möchte ein blaues Quadrat mit einem roten Quadrat in der oberen rechten Ecke des blauen Quadrats (aber nicht fest in der Ecke).Aufgrund von Leistungsproblemen versuche ich, Compositing (mit ImageMagick und ähnlichem) zu vermeiden.

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

Als schwierigeres Beispiel stellen Sie sich einen Kilometerzähler vor, der in einem größeren Bild platziert ist.Für sechs Ziffern müsste ich eine Million verschiedener Bilder zusammensetzen oder alles im Handumdrehen erledigen, wobei ich lediglich die sechs Bilder übereinander platzieren müsste.

Answer 1

Ok, nach einiger Zeit bin ich hier gelandet:

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

Als einfachste Lösung.Das ist:

Erstellen Sie ein relatives Div, das im Fluss der Seite platziert wird.Platzieren Sie das Basisbild zuerst als relativ, damit das Div weiß, wie groß es sein soll.Platzieren Sie die Überlagerungen als absolute Werte relativ zur oberen linken Ecke des ersten Bildes.Der Trick besteht darin, die relativen und absoluten Zahlen richtig hinzubekommen.

Answer 2

Dies ist ein grober 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

Answer 3

Hier ist der Code, der Ihnen Anregungen geben könnte:

<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 Dies kann unpraktisch sein, da Sie beide Bilder absolut 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: CSS.Sie geben die Position ein:relativ auf dem Containerelement und positionieren Sie dann die untergeordneten Elemente 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.Darstellen, dass Folgendes angezeigt wird: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 das nicht verwenden Hintergrundtrick.Wenn Sie das tun, ist es der bessere Weg.

Answer 4

Ein Problem, das mir aufgefallen ist und das zu Fehlern führen könnte, 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;"/>

Ansonsten hat die Antwort gut funktioniert.Danke.

Answer 5

Man kann absolut positionieren pseudo elements relativ zu ihrem übergeordneten Element.

Dadurch stehen Ihnen für jedes Element zwei zusätzliche Ebenen zur Verfügung, mit denen Sie spielen können. So wird die Positionierung eines Bildes über einem anderen einfacher – 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 ein LIVE-DEMO

Answer 6

Der einfachste 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 stehen unzählige Ressourcen zur Verfügung, die Ihnen dabei helfen können. Suchen Sie einfach danach CSS-Ebenen.

Answer 7

Der Inline-Stil dient hier nur der Übersichtlichkeit.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>

Answer 8

@buti-oxa:Ich möchte nicht pedantisch sein, aber Ihr Code ist ungültig.Der HTML width Und height Attribute erlauben keine Einheiten;Sie denken wahrscheinlich an das CSS width: Und height: Eigenschaften.Sie sollten auch einen Inhaltstyp angeben (text/css;siehe Espo-Code) mit dem <style> Etikett.

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

Verlassen px; im width Und height Attribute können dazu führen, dass eine Rendering-Engine blockiert.

Answer 9

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