CSS relative position top not working

HTML-CSS
1

Hi guys,

I ran into this problem while positioning an element in a fixed navbar:
http://jsfiddle.net/HVHxq/34/

I have a fixed outer container div with a relative positioned inner div. However, the “top: 50%” does not work at all when I insert a 3rd div (id=middle) in between the outer and inner div. The weird thing is, the “left: 50%” DOES work!?

I understand how to fix this: I can use position:absolute on inner div, or I can remove the middle div, but that’s not the issue. The issue is I don’t understand WHY it behaves like this, so I’m hoping someone can explain why when there is an (id=middle) div between the (id=outer) and (id=inner) div, “top:50%” stops working but “left:50%” still does.

Thanks in advance

2

fixed it stands above all the elements.

absolute, if not put inside a relative parent, then the body will be considered as parent for absolute positioned element.

But if you have a relative element or static element inside a fixed element, then those will stand above the fixed one.

Here try giving the #middle some height like 500px, then you will notice the top prop of #inner working.

Currently it doesn’t work since the #middle (which is normal static element) equals to the height of relative element.

Tweaked a little on your fiddle,

You can have a reference from this,
https://www.w3schools.com/cssref/playit.asp?filename=playcss_position