Blogger Ever

CSS stacking with examples

Putting the elements in order, no matter their position in DOM.
CSS stacking is not as we see it. z-index is not the only property involve and stacking doesn't only means to show up the content according to their index numbers but position of their or the their parent elements creates a difference we do stacking. Have a look at different cases with demo pens.

See the Pen CSS Stacked Paper Effect by Michael Martin-Smucker (@mlms13) on CodePen.
This one is the most basics of stacking, putting the elements on one another. Considering the above demo, the parent element that is letter do not have any z-index value specified (default is auto). But position is set to relative, it means the pseudo elements would follow-up the stacking that relates to letter.

Pseudo elements have z-index -1 and position absolute. Beside having z-index value -1 they are still visible. If we just remove the position relative from letter then pseudo elements will no more visible and in perspective of stacking they are behind the body tag.
See the Pen CSS stacking demo by Mohammad Hamza Dhamiya (@hamzadhamiya) on CodePen.
The above demo demonstrates if parent have some z-index and child have z-index -1. This puts the child behind the text of parent. This keeps the child in front of parent but behind text. But make sure that parent is set to position relative and obviously child on absolute. Stacking is combining the position and z-index property.

See the Pen Modal and css stacking demo by Mohammad Hamza Dhamiya (@hamzadhamiya) on CodePen.
Bootstrap uses a jQuery plugin for their modal window needs. In the guide they recommend to put modal content in most outer part of DOM hierarchy because any parent tag with position relative can cause the modal window go wrong. The best practice to build a modal window is to keep modal content a child to body tag or insert it using Javascript.

If modal window content is in root of DOM hierarchy make sure that parent tags do not have position relative. 

2013-2016 Copyright Blogger E\ver . Coded, managed and founded by Mohammad Hamza (@hamzadhamiya) . Hosted on Blogger and fonts used are Raleway and Open Sans.