Css3 why z-index does not work with position relative?

If you change both to relative then as the co-ordinates are zero that means the elements have not been moved at all and will just occupy space in the logical normal flow of the document one after the other and will not overlap.

If you change only one element to relative then the elements may or may not overlap but it will depend where the closest positioned ancestor lies (either relative or absolute). If none exists then the absolute co-ordinates are taken from the root element which may or may not be where your relative element is resisiding and thus will depend whether they overlap or not. Generally the root element (html) has margin/padding applied by default so if you only have two elements on the page then the relative element will not be flush to the viewport edge but the absolute element will.

You can read more about relative positioning in the following thread.

4 Likes