CODEWITHSUNDEEP
htmlcss
jpgerb
jpgerb

Reputation: 1120

How to center 2 div (overlapped) horizontally centered

I am trying to center 2 divs overlapped in the center of the screen. i have one with 

#div1 {
    width: 1100px;
    height: 100%;
    margin: 0 auto;
    background-color: blue;
    z-index: -1;
}
#div2 {
    width: 900px;
    height: 100%;
    margin: 0 auto;
    background-color: green;
    z-index: 0;
}

My goal is to have #div1 in back (centered) while #div2 is in the front (centered on top). When I do:

<div id="div1"></div>
<div id="div2">test</div>

It does not stack them. I've also tried adding a fixed and relative position to each element and that seems to make things worse. Any ideas?

Thanks!

Upvotes: 0

Views: 29

Answers (2)

light
light

Reputation: 4287

The normal document flow is top to bottom, so when you declare #div2 after #div1, it appears after #div1. If you want it to appear "on top" of #div1, you need to declare #div2 inside #div1.

Is this what you're trying to do?

html, body {
  height: 100%;
  width: 100%;
}
#div1 {
    width: 500px; /* I changed the dimensions to help small screens */
    height: 100%;
    margin: 0 auto;
    background-color: blue;
}
#div2 {
    width: 300px; /* I changed the dimensions to help small screens */
    height: 100%;
    margin: 0 auto;
    background-color: green;
}
<div id="div1">
  <div id="div2"></div>
</div>

You don't need z-index, and please always remember to use semantic tag names rather than div1, div2. Good luck!

Upvotes: 1

Neo
Neo

Reputation: 1469

Do these have parent

Try this:

#parentdiv {
position: relative;}

#div1{
position:absolute;
width: 100%;}

div2{
position:absolute;
z-index:1;
width: 100%;}

Hope this help! ^^

Upvotes: 0

Related Questions