Alexandra Grecsko Alexandra Grecsko - 3 months ago 8
CSS Question

Overlay the Contents of a DIV

I am trying to overlay 2 DIV's in my main parent DIV:
I want to overlay the the second div over on top of the first one. I have a problem overlaying it as I cannot keep it in the middle of the screen.
I have tried this to overlay:

The overlay works fine here, but my container is no longer center when I do this. How can I overlay and keep it center ?



div {
border: 5px solid red;
}
#first {
position: absolute;
z-index: 1;
border-color: orange;
}
#second {
position: absolute;
z-index: 2;
border-color: green;
}

<div id="container" class="container text-center">
<div id="first">Hi</div>
<div id="second">Hello</div>
</div>




Answer

Here is what you need to do (see width of both divs and text-align properties):

You can give them background color to see z-index works perfectly :)

#first {
  text-align: center;
  height: 300px;
  width: 100%;
  position: absolute;
  z-index: 1;
}
#second {
  text-align: center;
  height: 300px;
  width: 100%;
  position: absolute;
  z-index: 2;
}
<div id="container" class="container text-center">
  <div id="first">Hi</div>
  <div id="second">Hello</div>
</div>