CODEWITHSUNDEEP
javascripthtmlcss
Alexandra Grecsko
Alexandra Grecsko

Reputation: 21

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>

Upvotes: 0

Views: 148

Answers (6)

sabithpocker
sabithpocker

Reputation: 15568

Try this style:

#first,
#second {
  left: 50%;
  transform: translate(-50%, 0);
}


div {
  border: 5px solid red;
}
#first {
  position: absolute;
  z-index: 1;
  border-color: orange;
}
#second {
  position: absolute;
  z-index: 2;
  border-color: green;
}
#first,
#second {
  left: 50%;
  transform: translate(-50%, 0);
}
<div id="container" class="container text-center">
  <div id="first">Hi</div>
  <div id="second">Hello</div>
</div>

Upvotes: 0

Geoff James
Geoff James

Reputation: 3180

Your main issue is that the divs will not have any relative width to the parent div.

Therefore the text is still technically "centered" in each corresponding div because they're inheriting text-align: center from the container div.

However, the divs' widths will automatically be as wide as they needs to be (i.e. to fit the text, in this case).

You can remedy this one of two ways:

Force the divs to be centered

Give both divs the following (extra) CSS:

left: 50%;
width: 100%;
margin-left: -50%;

This will literally center them in their parent div.

or

Force the divs to be the same size as their parent

Give both the divs the following (extra) CSS:

top: 0;
bottom: 0;
left: 0;
right: 0;

This sets the divs to span their entire parent's height and width.

In both situations, you might need to make the .container class use position: relative, in order for the child divs to have something to be absolute to.

If you're using Bootstrap, there is no need to worry about this, as .container class already has this applied.

Hope one of these solutions helps you :)

Upvotes: 0

Irfan Anwar
Irfan Anwar

Reputation: 1918

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>

Upvotes: 1

Naresh
Naresh

Reputation: 872

#container {
  position: relative;
  width: 100%;
  height: 100px;
  background-color: yellow;
  display: flex;
  justify-content: center;
  align-items: center;
}
#first{
    position: absolute;
}
#second{
    position: absolute;
}
<div id="container" class="container"> 
    <div id="first">Hi</div>
    <div id="second">Hello</div>
</div>

Upvotes: 0

Guy Waldman
Guy Waldman

Reputation: 467

Your container's text is no longer centered because you have removed its children from the document flow. In essence, it has no content and collapses, and therefore, has no width to which to align the text.

One thing you could do is set the container to position: relative and full-width (i.e. width: 100vw), then set its children to width: 100%. Then the inner divs will take on the width of their parent.

See this working JSFiddle.

Upvotes: 0

jedifans
jedifans

Reputation: 2297

When you position absolute, the positioned element is taken out of the document flow and positioned relative to the next highest parent element that is not the default position, i.e. not position: static;

The following will cause the absolute positioned children to stay within the containing div:

#container {
    position: relative;
}

Upvotes: 1

Related Questions