CODEWITHSUNDEEP
htmlcss
Tibor
Tibor

Reputation: 99

Absolutely positioned div doesn't work

I have a css animation, which makes a div go under another div. DIV 1 goes under DIV 2. If I make DIV 2 absolutely positioned, the page will break in pieces. But if I don't make the DIV 2 absolutely positioned, the DIV 1 will not go under it, buy stay at the top of the div.

You can check it out live here

This is how it looks without making the right content absolutely positioned.

If you hover your mouse over the map, you will see the transition.

Any helpful solutions of getting rid of this? I would really appreciate.

Thanks in advance.

Upvotes: 2

Views: 103

Answers (4)

Akul Von Itram
Akul Von Itram

Reputation: 1534

That is why it don't work, your parent div has to have position to child div position take effect.

.div1, .div2{
position:relative;
}
.div3{
position:absolute;
}

Take a look here: https://css-tricks.com/absolute-positioning-inside-relative-positioning/

Upvotes: 4

Robin Carlo Catacutan
Robin Carlo Catacutan

Reputation: 13679

To make the #content to be the top layer add z-index with a higher value with the other div.

Take note, z-index doesn't work if you don't set your div position:absolute or position: relative

#content {
  position: relative;
  z-index: 3;
}

Upvotes: 2

Michał Lach
Michał Lach

Reputation: 1278

I managed to make it work:

#content {
  position: relative;
}

.info {
z-index: 0;
  position: relative;
}

Upvotes: 2

Ruan Mendes
Ruan Mendes

Reputation: 92294

Make Div 2 be position: relative so that it stays in the flow. See How to make div's percentage width relative to parent div and not viewport

From that answer:

Specifying position:relative; or position:absolute; on a node means that it will be used as the reference for absolutely positioned elements within it http://jsfiddle.net/E5eEk/1/

Upvotes: 2

Related Questions