Often, you encounter situations in which you don't like the natural stacking order of elements rendered by your browser. For example, you want the tool tips to come above the element on which it is hovered, or the dialog boxes to come over all the components of the page. In comes the z-index property of CSS.
z-index, as the name suggests, is used to align items on the z-axis; the axis perpendicular to screen which you can imagine coming towards you. The value of z-index can be positive, zero or negative integer, and the higher the value, the closer it will be to you. It is worthy to note that z-index works only when the element is given a position, i.e. absolute, relative or fixed.
Before getting into more details, lets first understand how the elements are stacked in HTML. The order given is from back to front, and to my best understanding of the much complicated, but detailed W3.org website.
I hope these examples cleared your doubts regarding z-index and you enjoyed reading and learning from it.
z-index, as the name suggests, is used to align items on the z-axis; the axis perpendicular to screen which you can imagine coming towards you. The value of z-index can be positive, zero or negative integer, and the higher the value, the closer it will be to you. It is worthy to note that z-index works only when the element is given a position, i.e. absolute, relative or fixed.
Before getting into more details, lets first understand how the elements are stacked in HTML. The order given is from back to front, and to my best understanding of the much complicated, but detailed W3.org website.
- First comes positioned elements which have negative z-index.
- Elements which have no position, no inline and no float attributes comes next in the picture.
- The elements which have been given no position attribute but have a floating attribute.
- The elements which have been given no position attribute but have an inline attribute.
- The positioned elements comes at last. Elements with higher z-index values are stacked closer to you at the top.
auto. auto means that the element will take the z-index of its parent. While it does not find any z-index value, it will recurse all the way to the top, where the <html> node has a z-index of 0. Also, whenever there is a tie between elements in the above ordering, the one which comes before in the HTML dom, are stacked first, so they are farther away from you.Examples:
Enough of theory, now lets take a look at some examples, which should clear all doubts. In these examples, I have created two divs (boxes) of different colors and borders, so that they can be recognized easily. I have given a negative top margin to the second div, so that it can overlap with the first one, otherwise z-index would never come into picture. Occasionally I have created additional divs like a child div or a floating div to enhance your concepts.- Two Div without z-index[Link to fiddle]: None of the elements are given z-index. The first to come is stacked first, so the red one is farther away from you.
- Two Div with z-index[Link to fiddle]: Both elements are given a position of relative. Additionally a z-index of 1 is given to the red box. Hence it goes above the green box.
- Introducing a child div[Link to fiddle]: I introduced a child div to the first div in the above case and did not give it any z-index. Which means it takes a z-index of auto and looks for a z-index from it parent. It gets a value of 1 and so it is stacked above that of green box.
- Float and inline divs[Link to fiddle]: This is a much more complicated case. I created 2 more div one with float(yellow) and one with inline display(brown). At the bottom is green box. It satisfies case 2 of the above ordering, and has no inline, float and no position attributes. Next we can see yellow. It satisfies case 3 and is floating type. Next comes brown, it satisfies case 4 and is inline. Finally we have a positioned element red, with z-index = 1 which sits atop everyone.
I hope these examples cleared your doubts regarding z-index and you enjoyed reading and learning from it.
No comments:
Post a Comment