CODEWITHSUNDEEP
htmlcss
Jaron787
Jaron787

Reputation: 560

HTML CSS - Placing one image on top of another

I want to place one image on top of another whilst keeping the contents underneath from being shifted up. I know you can use absolute positioning but this shifts everything below behind the image as well. Does anyone know how to achieve this?

I have the below example which I need editing to place the circle on top of the square:

https://jsfiddle.net/Jaron787/2mv98mkp/2/

HTML

<div>
  <img src='http://www.clker.com/cliparts/U/D/B/J/j/R/red-square-th.png'>
  <img src='http://www.clker.com/cliparts/G/f/E/Y/v/l/circle-th.png'>
</div>
<div id="lse" class="display">
  <div id="centertbl">
    <table id="tblData" class="TSS">
      <tr>
        <td align="center" colspan="4"><b>Table 1</b></td>
      </tr>
    </table>

    <table id="tblData" class="TSS">
      <tr>
        <td align="center" colspan="4"><b>Table 2</b></td>
      </tr>
    </table>
  </div>

  <input type="submit" class="button button1" name="submitButton" value="Button 1">
  <input type="submit" class="button button1" name="submitButton" value="Button 2">
  <input type="submit" class="button button1" name="submitButton" value="Button 3">
  <input type="submit" class="button button1" name="submitButton" value="Button 4">

</div>

CSS

.TSS {
  border: 1px solid #000000;
  float: none;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 10.6px;
  font-style: normal;
  padding: 10px;
  text-decoration: none;
  display: inline-block;
}

#centertbl {
  text-align: center;
}

.button {
  background-color: #4CAF50;
  /* Green */
  border: none;
  color: white;
  padding: 5px 15px;
  text-align: center;
  text-decoration: none;
  display: block;
  font-size: 16px;
  margin: 4px 2px;
  -webkit-transition-duration: 0.4s;
  /* Safari */
  transition-duration: 0.4s;
  cursor: pointer;
}

.button1 {
  background-color: white;
  color: black;
  border: 2px solid #4CAF50;
}

.button1:hover {
  background-color: #4CAF50;
  color: white;
}

Upvotes: 2

Views: 169

Answers (3)

Shaggy
Shaggy

Reputation: 6796

One method of doing it would be to use negative margins to position one element over the other, with corresponding positive margins on the opposite side(s) in order to maintain the layout, like so:

*{box-sizing:border-box;border:0;font-family:sans-serif;margin:0;}
hr{background:#000;border-radius:2px;color:#000;height:2px;margin:20px auto;width:98%;}
div:nth-of-type(2n-1){
  background:#999;
  border-radius:5px;
  height:100px;
  width:100px;
}
div:nth-of-type(2n){
  background:#000;
  border-radius:50%;
  height:50px;
  width:50px;
}
div:last-of-type{
  margin:-75px 0 75px 25px;
}
<div></div>
<div></div>
<p>Text goes here</p>
<hr>
<div></div>
<div></div>
<p>Text goes here</p>

You could also use the transform property to translate the position of the second div.

*{box-sizing:border-box;border:0;font-family:sans-serif;margin:0;}
hr{background:#000;border-radius:2px;color:#000;height:2px;margin:20px auto;width:98%;}
div:nth-of-type(2n-1){
  background:#999;
  border-radius:5px;
  height:100px;
  width:100px;
}
div:nth-of-type(2n){
  background:#000;
  border-radius:50%;
  height:50px;
  width:50px;
}
div:last-of-type{
  transform:translate(25px,-75px);
}
<div></div>
<div></div>
<p>Text goes here</p>
<hr>
<div></div>
<div></div>
<p>Text goes here</p>

Upvotes: 0

Debabrata Mohanta
Debabrata Mohanta

Reputation: 645

Add the following css to the circle:

#circle{
 position:relative;
 z-index:1;
left:-100px;
}

Edited the fiddle: https://jsfiddle.net/Debabrata89/qdd2z402/

Upvotes: 4

TechnicalTophat
TechnicalTophat

Reputation: 1725

What you could do is have a div with a background image set in css, then in that div use an <img /> tag, like below:

HTML:

<div class='image-bg'>
  <img src='path/to/image' />
</div>

CSS:

.image-bg {
/*any other styles*/
background-image: url('relative/path/to/background/image');

Upvotes: 4

Related Questions