How to put a image below another?


Tags: html,css,html5

Problem :

I know their are a lot of similar questions, but non of those fixed my problem. How to put a image below another with x px gap? This is my code

html

<img src="images/2.jpg" style="position:absolute;">
<img src="images/1.png"  style="position:absolute;">

CSS

img {
top: 50%;
left: 50%;
max-width: 480px;
width: 100%;
height: auto;
transform: translate(-50%, -50%);
display: block; 

}

Edit: this is my problem https://jsfiddle.net/50crfe10/ As you can see, their are 2 images, but only 1 appear. because one is above another.



Solution :

Just remove position:absolute if your ok with it and also remove transform property

img {
	max-width: 480px;
	width: 100%;
	height: auto;
        display: block;
        margin:20px auto;
	
    }
<body>
  <img class="one" src="https://scontent-sin.xx.fbcdn.net/v/t1.0-0/s480x480/13432215_784505675021945_898862369521210510_n.png?oh=1600b007c6bc56ad2a9e72c5978166b5&oe=5802FEB3">
    <img class="two" src="https://scontent-sin.xx.fbcdn.net/v/t1.0-9/13423946_783982808407565_3306592852780950589_n.png?oh=1131478aac319f301c563d020ed8214e&oe=57C2C4DE">
</body>


    CSS Howto..

    How to keep footer at the bottom even with dynamic height website

    How to place two labels around an image (dynamically); right and bottom?

    How to retrieve the background image url defined in CSS?

    CSS how to transition(with transform) a parent and child both, differently

    How to check if an element matches the :empty pseudo-class in pure JS?

    How can I target these children divs with one selector?

    How can I take pseudo:after { content: “Value”; } value dynamically in this snippet?

    How to cover box shadow?

    How to combine grouped inputs with aligned forms?

    JQuery toggled div not showing on resize

    Normalized CSS, option in JSFiddle, how to add it to document

    How to scroll in a div?

    how to underline a letter of button caption in vaadin?

    How can I fix this Bootstrap layout issue?

    how to combine multiple css class selectors into one?

    how to prevent transformation of text inherited from a skewed parent

    Jquery/CSS: How to apply addClass with a delay of 1 sec on mouseenter event.

    How to get precise borders and sizes in Android KitKat's Webview(Android Chrome) on Nexus 7?

    CSS: How to Solve this “Site-Is-Too-Big” Challenge?

    How to place a css button in center (horizontal) of four table columns

    How to get jquery ui tabs working?

    How do you find the dimensions of a “display: none” element?

    How can i draw a box using css like the answer box in stackoverflow?

    How to edit the CSS of CarrierWave's 'Choose file' button and “No file chosen” text? (Rails4)

    CSS: How to align text to baseline of height-adjusted input element?

    How to Prevent Browsers from Caching CSS Files?

    How to make a button with nice border - inside class HTML / CSS

    How to highlight a table row upon hover conditionally based on table cell values with CSS and jQuery?

    How to take whole available width in bootstrap css?

    How to add my custom css class to a html element