Photo credit: Incase Designs Stacking Order Z-index is only one type of stacking level within a stacking context and the levels are rendered according to a set of stacking order rules, which will get to next. The z-index value creates a new integer stacking level for that element with a position along the z-axis set relative to the other boxes within the same stacking context. When you add css positioning to an element and give it a z-index (other than auto) it creates new stacking context with new stacking levels inside the new context. The root of that stacking context is the html element and elements inside that stacking context (everything inside the page) are located on different stacking levels within that default context. The basic idea is there is one stacking context created by default with any web page. Stacking contexts are not necessarily related to containing blocks. Other stacking contexts are generated by any positioned element (including relatively positioned elements) having a computed value of ‘z-index’ other than ‘auto’. The root element (html) forms the root stacking context. Stacking contexts can be a little confusing. You can think of a stacking level as being a new layer on the page, but what about this stacking context. This order is described in terms of stacking contexts and stacking levels. When a browser is rendering your design elements along the z-axis it has to decide which element to draw on the canvas first. Photo credit: Demion Stacking Contexts and Stacking LevelsĮvery css box has three dimensions along the horizontal, vertical, and z axis. To really understand what’s going on we need to discuss the stack. The quick definitions of the values above are only so useful.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |