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

<p>I just want to position overlapping images relative to one another.</p>

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

[{'answer_id': 48482, 'author': 'Chris Bartow', 'author_id': 497, 'author_profile': 'https://Stackoverflow.com/users/497', 'pm_score': 3, 'selected': False, 'text': '<p>The easy way to do it is to use background-image then just put an &lt;img&gt; in that element.</p>\n\n<p>The other way to do is using css layers.  There is a ton a resources available to help you with this, just search for <a href="http://www.google.com/search?q=css+layers" rel="noreferrer">css layers</a>.</p>\n'}, {'answer_id': 48484, 'author': 'Espo', 'author_id': 2257, 'author_profile': 'https://Stackoverflow.com/users/2257', 'pm_score': 6, 'selected': False, 'text': '<p>This is a barebones look at what I\'ve done to float one image over another.</p>\n<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">\r\n<div class="snippet-code">\r\n<pre class="snippet-code-css lang-css prettyprint-override"><code>img {\n  position: absolute;\n  top: 25px;\n  left: 25px;\n}\n.imgA1 {\n  z-index: 1;\n}\n.imgB1 {\n  z-index: 3;\n}</code></pre>\r\n<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;img class="imgA1" src="https://via.placeholder.com/200/333333"&gt;\n&lt;img class="imgB1" src="https://via.placeholder.com/100"&gt;</code></pre>\r\n</div>\r\n</div>\r\n</p>\n<p><a href="http://www.webmasterworld.com/css/3193750.htm" rel="noreferrer">Source</a></p>\n'}, {'answer_id': 48530, 'author': 'buti-oxa', 'author_id': 2515, 'author_profile': 'https://Stackoverflow.com/users/2515', 'pm_score': 5, 'selected': False, 'text': '<p>Here\'s code that may give you ideas:</p>\n\n<pre><code>&lt;style&gt;\n.containerdiv { float: left; position: relative; } \n.cornerimage { position: absolute; top: 0; right: 0; } \n&lt;/style&gt;\n\n&lt;div class="containerdiv"&gt;\n    &lt;img border="0" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" alt="""&gt;\n    &lt;img class="cornerimage" border="0" src="http://www.gravatar.com/avatar/" alt=""&gt;\n&lt;div&gt;\n</code></pre>\n\n<p><a href="https://jsfiddle.net/xj14v0nj/" rel="noreferrer">JSFiddle</a></p>\n\n<p>I suspect that <a href="https://stackoverflow.com/questions/48474#48484">Espo\'s solution</a> may be inconvenient because it requires you to position both images absolutely. You may want the first one to position itself in the flow.</p>\n\n<p>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.</p>\n\n<p>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 <a href="https://stackoverflow.com/questions/48474/how-do-i-position-one-image-on-top-of-another-in-html#48482">background trick</a>. If you do, it is a better way to go. </p>\n'}, {'answer_id': 48531, 'author': 'FlySwat', 'author_id': 1965, 'author_profile': 'https://Stackoverflow.com/users/1965', 'pm_score': 3, 'selected': False, 'text': '<p>Inline style only for clarity here. Use a real CSS stylesheet.</p>\n\n<pre><code>&lt;!-- First, your background image is a DIV with a background \n     image style applied, not a IMG tag. --&gt;\n&lt;div style="background-image:url(YourBackgroundImage);"&gt;\n    &lt;!-- Second, create a placeholder div to assist in positioning \n         the other images. This is relative to the background div. --&gt;\n    &lt;div style="position: relative; left: 0; top: 0;"&gt;\n        &lt;!-- Now you can place your IMG tags, and position them relative \n             to the container we just made --&gt;   \n        &lt;img src="YourForegroundImage" style="position: relative; top: 0; left: 0;"/&gt;\n    &lt;/div&gt;\n&lt;/div&gt;\n</code></pre>\n'}, {'answer_id': 48533, 'author': 'Sören Kuklau', 'author_id': 1600, 'author_profile': 'https://Stackoverflow.com/users/1600', 'pm_score': 0, 'selected': False, 'text': '<p>@buti-oxa: Not to be pedantic, but your code is invalid. The HTML <code>width</code> and <code>height</code> attributes do not allow for units; you\'re likely thinking of the CSS <code>width:</code> and <code>height:</code> properties. You should also provide a content-type (<code>text/css</code>; see Espo\'s code) with the <code>&lt;style&gt;</code> tag.</p>\n\n<pre><code>&lt;style type="text/css"&gt; \n.containerdiv { float: left; position: relative; } \n.cornerimage { position: absolute; top: 0; right: 0; } \n&lt;/style&gt;\n\n&lt;div class="containerdiv"&gt;\n    &lt;img border="0" src="http://www.gravatar.com/avatar/" alt="" width="100" height="100"&gt;\n    &lt;img class="cornerimage" border="0" src="http://www.gravatar.com/avatar/" alt="" width="40" height="40"&gt;\n&lt;div&gt;\n</code></pre>\n\n<p>Leaving <code>px;</code> in the <code>width</code> and <code>height</code> attributes might cause a rendering engine to balk.</p>\n'}, {'answer_id': 1997397, 'author': 'rrichter', 'author_id': 5038, 'author_profile': 'https://Stackoverflow.com/users/5038', 'pm_score': 10, 'selected': True, 'text': '<p>Ok, after some time, here\'s what I landed on:</p>\n<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">\r\n<div class="snippet-code">\r\n<pre class="snippet-code-css lang-css prettyprint-override"><code>.parent {\n  position: relative;\n  top: 0;\n  left: 0;\n}\n.image1 {\n  position: relative;\n  top: 0;\n  left: 0;\n  border: 1px red solid;\n}\n.image2 {\n  position: absolute;\n  top: 30px;\n  left: 30px;\n  border: 1px green solid;\n}</code></pre>\r\n<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="parent"&gt;\n  &lt;img class="image1" src="https://via.placeholder.com/50" /&gt;\n  &lt;img class="image2" src="https://via.placeholder.com/100" /&gt;\n&lt;/div&gt;</code></pre>\r\n</div>\r\n</div>\r\n</p>\n<p>As the simplest solution.  That is:</p>\n<p>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.</p>\n'}, {'answer_id': 8306607, 'author': 'Wez', 'author_id': 1070683, 'author_profile': 'https://Stackoverflow.com/users/1070683', 'pm_score': 4, 'selected': False, 'text': '<p>One issue I noticed that could cause errors is that in rrichter\'s answer, the code below:</p>\n\n<pre><code>&lt;img src="b.jpg" style="position: absolute; top: 30; left: 70;"/&gt;\n</code></pre>\n\n<p>should include the px units within the style eg.</p>\n\n<pre><code>&lt;img src="b.jpg" style="position: absolute; top: 30px; left: 70px;"/&gt;\n</code></pre>\n\n<p>Other than that, the answer worked fine. Thanks.</p>\n'}, {'answer_id': 14434582, 'author': 'Danield', 'author_id': 703717, 'author_profile': 'https://Stackoverflow.com/users/703717', 'pm_score': 3, 'selected': False, 'text': '<p>You can absolutely position <code>pseudo elements</code> relative to their parent element.</p>\n\n<p>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).</p>\n\n<p>markup:</p>\n\n<pre><code>&lt;div class="overlap"&gt;&lt;/div&gt;\n</code></pre>\n\n<p>css:</p>\n\n<pre><code>.overlap\n{\n    width: 100px;\n    height: 100px;\n    position: relative;\n    background-color: blue;\n}\n.overlap:after\n{\n    content: \'\';\n    position: absolute;\n    width: 20px;\n    height: 20px;\n    top: 5px;\n    left: 5px;\n    background-color: red;\n}\n</code></pre>\n\n<p>Here\'s a <a href="http://jsfiddle.net/danield770/nFvUu/3/" rel="noreferrer"><strong>LIVE DEMO</strong></a></p>\n'}, {'answer_id': 51639228, 'author': 'Elkin Angulo', 'author_id': 5618571, 'author_profile': 'https://Stackoverflow.com/users/5618571', 'pm_score': 3, 'selected': False, 'text': '<p>It may be a little late but for this you can do:</p>\n\n<p><a href="https://i.stack.imgur.com/uyctb.png" rel="noreferrer"><img src="https://i.stack.imgur.com/uyctb.png" alt="enter image description here"></a></p>\n\n<p>HTML</p>\n\n<pre><code>&lt;!-- html --&gt;\n&lt;div class="images-wrapper"&gt;\n  &lt;img src="images/1" alt="image 1" /&gt;\n  &lt;img src="images/2" alt="image 2" /&gt;\n  &lt;img src="images/3" alt="image 3" /&gt;\n  &lt;img src="images/4" alt="image 4" /&gt;\n&lt;/div&gt;\n</code></pre>\n\n<p>SASS</p>\n\n<pre><code>// In _extra.scss\n$maxImagesNumber: 5;\n\n.images-wrapper {\n  img {\n    position: absolute;\n    padding: 5px;\n    border: solid black 1px;\n  }\n\n  @for $i from $maxImagesNumber through 1 {\n    :nth-child(#{ $i }) {\n      z-index: #{ $maxImagesNumber - ($i - 1) };\n      left: #{ ($i - 1) * 30 }px;\n    }\n  }\n}\n</code></pre>\n'}, {'answer_id': 60033524, 'author': 'Pallavi Singh', 'author_id': 12818184, 'author_profile': 'https://Stackoverflow.com/users/12818184', 'pm_score': 0, 'selected': False, 'text': '<p>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.</p>\n'}, {'answer_id': 67323791, 'author': 'Howdy', 'author_id': 2246369, 'author_profile': 'https://Stackoverflow.com/users/2246369', 'pm_score': 1, 'selected': False, 'text': "<p>Set background-size cover. Then wrap your div with another div now set max-width on parent div.</p>\n<pre><code>&lt;div style=&quot;max-width:100px&quot;&gt;\n  &lt;div style=&quot;background-image:url('/image.png'); background-size: cover; height:100px; width:100px; &quot;&gt;&lt;/div&gt;\n&lt;/div&gt;\n</code></pre>\n"}, {'answer_id': 68994219, 'author': 'Fzum', 'author_id': 7449607, 'author_profile': 'https://Stackoverflow.com/users/7449607', 'pm_score': 2, 'selected': False, 'text': '<p>You could use <strong>CSS-Grid</strong>, which is a very convenient solution if you want to <strong>stack, overlap</strong> content. First you need to define your grid. Inside that grid, you &quot;tell&quot; your img-tags where to be places within that grid. If you define them to be at the same start of the grid, they will be overlapped. In the following example two images are overlapped, one is below them.</p>\n<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">\r\n<div class="snippet-code">\r\n<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div style="display: grid; grid-template-columns: [first-col] 100%; grid-template-rows: [first-row] 300px"&gt;\n  &lt;img src="https://fakeimg.pl/300/" style="grid-column-start: first-col; grid-row-start: first-row"&gt;\n  &lt;img src="https://fakeimg.pl/300/" style="grid-column-start: first-col; grid-row-start: first-row"&gt;\n  &lt;img src="https://fakeimg.pl/300/"&gt;\n&lt;/div&gt;</code></pre>\r\n</div>\r\n</div>\r\n</p>\n<p>You can find a very good explanation of CSS-Grid <a href="https://css-tricks.com/snippets/css/complete-guide-grid/" rel="nofollow noreferrer">here</a>.</p>\n'}, {'answer_id': 72413713, 'author': 'John Chidi', 'author_id': 13283577, 'author_profile': 'https://Stackoverflow.com/users/13283577', 'pm_score': 1, 'selected': False, 'text': '<p>Here is a solution that worked for me. Assuming all the images to be stacked are inside a div container, all you need to do is to set the <strong>display</strong> property of the div to <strong>flex</strong>. Don\'t set any position for the first image but for every other image, set the <strong>position</strong> property to <strong>absolute</strong>.  Finally, use z-index to control the layers. You can set the first image\'s z-index to 1, the second image\'s z-index to 2, and so on (In my own case, I set the z-index of every other image apart from the first image to 2). If you want to center the images, you can set the <strong>justify-content</strong> property of the div to <strong>center</strong> to align the images horizontally to the center and adjust the <strong>top</strong> property to align the images vertically to the center. The values you use for the justify-content and top properties depend on the size of your images and whether the sizes are responsive on different devices or not.\nHere\'s my example:</p>\n<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">\r\n<div class="snippet-code">\r\n<pre class="snippet-code-css lang-css prettyprint-override"><code>img {\n  border: 2px solid red;\n}\n\n.img1n2 {\n  display: flex; \n  justify-content:center;\n}\n\n.img1 {\n  z-index: 1;\n}\n\n.img2 {\n  position: absolute; \n  z-index: 2;\n  top: 52.5%;\n}</code></pre>\r\n<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="img1n2"&gt;\n  &lt;img class="img1" src="https://fakeimg.pl/400/"&gt;\n  &lt;img class="img2" src="https://fakeimg.pl/300/" width="100"&gt;\n  &lt;img class="img2" src="https://fakeimg.pl/200/" width="50"&gt;\n  &lt;img class="img2" src="https://fakeimg.pl/50/" width="30"&gt;\n&lt;/div&gt;</code></pre>\r\n</div>\r\n</div>\r\n</p>\n<p>You can actually stack a thousand or a million images with this method. You can play around with the CSS to suit your specific needs. Happy coding!</p>\n'}]
['https://Stackoverflow.com/questions/48474', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/5038/']