How do I position one image on top of another in HTML

Question

I m a beginner at rails programming  attempting to show many images on a page   Some images are to lay on top of others   To make it simple  say I want a blue square  with a red square in the upper right corner of the blue square  but not tight in the corner    I am trying to avoid compositing  with ImageMagick and similar  due to performance issues   I just want to position overlapping images relative to one another   As a more difficult example  imagine an odometer placed inside a larger image   For six digits  I would need to composite a million different images  or do it all on the fly  where all that is needed is to place the six images on top of the other one

User · Answer

It may be a little late but for this you can do:

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

User · Answer

Inline style only for clarity here  Use a real CSS stylesheet    lt  -- First  your background image is a DIV with a background       image style applied  not a IMG tag  -- gt   lt div style  background-image url YourBackgroundImage    gt       lt  -- Second  create a placeholder div to assist in positioning           the other images  This is relative to the background div  -- gt       lt div style  position  relative  left  0  top  0   gt           lt  -- Now you can place your IMG tags  and position them relative               to the container we just made -- gt              lt img src  YourForegroundImage  style  position  relative  top  0  left  0    gt       lt  div gt   lt  div gt

User · Answer

This is a barebones look at what I ve done to float one image over another    x000D   x000D  img   x000D    position  absolute  x000D    top  25px  x000D    left  25px  x000D    x000D   imgA1   x000D    z-index  1  x000D    x000D   imgB1   x000D    z-index  3  x000D    x000D   lt img class  imgA1  src  https   placehold it 200 333333  gt  x000D   lt img class  imgB1  src  https   placehold it 100  gt  x000D   x000D   x000D    Source

User · Answer

Ok  after some time  here s what I landed on    x000D   x000D   parent   x000D    position  relative  x000D    top  0  x000D    left  0  x000D    x000D   image1   x000D    position  relative  x000D    top  0  x000D    left  0  x000D    border  1px red solid  x000D    x000D   image2   x000D    position  absolute  x000D    top  30px  x000D    left  30px  x000D    border  1px green solid  x000D    x000D   lt div class  parent  gt  x000D     lt img class  image1  src  https   placehold it 50    gt  x000D     lt img class  image2  src  https   placehold it 100    gt  x000D   lt  div gt  x000D   x000D   x000D    As the simplest solution   That is   Create a relative div that is placed in the flow of the page  place the base image first as relative so that the div knows how big it should be  place the overlays as absolutes relative to the upper left of the first image   The trick is to get the relatives and absolutes correct

User · Answer

buti-oxa  Not to be pedantic  but your code is invalid  The HTML width and height attributes do not allow for units  you re likely thinking of the CSS width  and height  properties  You should also provide a content-type  text css  see Espo s code  with the  lt style gt  tag    lt style type  text css  gt    containerdiv   float  left  position  relative      cornerimage   position  absolute  top  0  right  0      lt  style gt    lt div class  containerdiv  gt       lt img border  0  src  http   www gravatar com avatar   alt    width  100  height  100  gt       lt img class  cornerimage  border  0  src  http   www gravatar com avatar   alt    width  40  height  40  gt   lt div gt    Leaving px  in the width and height attributes might cause a rendering engine to balk

User · Answer

Create a relative div that is placed in the flow of the page  place the base image first as relative so that the div knows how big it should be  place the overlays as absolutes relative to the upper left of the first image  The trick is to get the relatives and absolutes correct

User · Answer

You can absolutely position pseudo elements relative to their parent element   This gives you two extra layers to play with for every element - so positioning one image on top of another becomes easy - with minimal and semantic markup  no empty divs etc    markup    lt div class  overlap  gt  lt  div gt    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      Here s a LIVE DEMO

User · Answer

Here s code that may give you ideas    lt style gt   containerdiv   float  left  position  relative      cornerimage   position  absolute  top  0  right  0      lt  style gt    lt div class  containerdiv  gt       lt img border  0  src  https   www google com images branding googlelogo 2x googlelogo color 272x92dp png  alt     gt       lt img class  cornerimage  border  0  src  http   www gravatar com avatar   alt    gt   lt div gt    JSFiddle  I suspect that Espo s solution may be inconvenient because it requires you to position both images absolutely  You may want the first one to position itself in the flow   Usually  there is a natural way to do that is CSS  You put position  relative on the container element  and then absolutely position children inside it  Unfortunately  you cannot put one image inside another  That s why I needed container div  Notice that I made it a float to make it autofit to its contents  Making it display  inline-block should theoretically work as well  but browser support is poor there   EDIT  I deleted size attributes from the images to illustrate my point better  If you want the container image to have its default sizes and you don t know the size beforehand  you cannot use the background trick  If you do  it is a better way to go

User · Answer

The easy way to do it is to use background-image then just put an  lt img gt  in that element   The other way to do is using css layers   There is a ton a resources available to help you with this  just search for css layers

User · Answer

One issue I noticed that could cause errors is that in rrichter s answer  the code below    lt img src  b jpg  style  position  absolute  top  30  left  70    gt    should include the px units within the style eg    lt img src  b jpg  style  position  absolute  top  30px  left  70px    gt    Other than that  the answer worked fine  Thanks

[html] How do I position one image on top of another in HTML?

Examples related to html

Examples related to css

Examples related to optimization

Examples related to graphics