It is been sometime I try my hand to CSS. But today when I got a chance to work on Jquery Animation to make it smoother than what it was, I realise that I never work with Z-index property. It is not that I don’t know about it, but it always is pain and I work around than using Z-Index. Today I decide to take a dig on it and did use it to make it work smooth. There is nothing much to tell about Z-index, that it just only align your Object in 3D [yup], for some saying it on layer is easier. However there are few things to note:
1. z-index is calculated relate to Sibling elements. i.e. if you set z-index on element from different parent element, then it is waste.
2. z-index doesn’t used up if elements are static or relatively positioned as in both case you already tell browser to calculate element position relative to other and or in default manner. However I read some where that it does work for few case with relative position. But it never for me.
Once I know those things it is easier for me to use it fully. So I thought to document it here.