Home/ Questions/Q 4042850
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-20T13:03:23+00:00

I have 2 images that I need to slightly overlap. My first image is

  • 0

I have 2 images that I need to slightly overlap. My first image is logo.png, and my second image is form.png

My html is:

<body id="wrapper">
  <div id="main" method="post" action="">
    <img src="images/logo.png" align="middle" id="Smarty" />
  </div>
  <div id="box" method="post" action="">
    <img id="Form" src="images/form.png" />
  </div>

And my CSS is:

 #wrapper #main {
   margin-top: 8%;
   margin-right: auto;
   margin-left: auto;
   text-align:center;
   display:block;
   z-index: 1;}

   #wrapper #box{
       margin-top: 8%;
   margin-right: auto;
   margin-left: auto;
   position: relative;
   text-align:center;
   top: 8%;
   display:block;
   z-index: -1;}

Basically I need both images to be centered relative to screen size, and I need the 2 to overlap. With this code, both images center, but my form seems to be 8% down from my logo, rather than 8% down from the top of the screen. Is this how I am supposed to be overlapping the 2, or am I way off?

Thanks!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    How about something like this?

    Live Demo

    Or using position: absolute, if that’s what you want:
    Live Demo

    CSS:

    #main {
    margin: 8% auto 0 auto;
    text-align:center;

    /* 
      only include this next rule
      if you want the first image to be over the second
    */
    position: relative
}

#box {
    text-align: center;
    margin: -12px 0 0 0;
    padding: 0
}

    HTML:

    <div id="main" method="post" action="">
    <img src="http://dummyimage.com/200x80/f0f/fff" align="middle" id="Smarty" />
</div>
<form id="box" method="post" action="">
    <img id="Form" src="http://dummyimage.com/200x40/f90/fff" />
</form>
    • 0