In order to solve it, we can apply a position property to the box class which will do the trick:. If we remove the z-index properties from both of the boxes, the blue box will still be positioned in front of the red box, even if there is no z-index property anymore:.
So when the elements are all on the same level, one element will still be in front of the other one, because they also have a default order in terms of the Z-axis. This is called the stacking order. Like in the example above, when there's no z-index applied to an element, browsers use a default stacking order to stack elements on the page:.
If we add another box, but set its position attribute to the default static , it will appear behind the blue and red boxes:.
While we did modify the blue and red boxes to use position: absolute instead of relative , and adjust their placement a bit, this helps show the browser's default stacking order — positioned elements on the same level will always appear over non-positioned or position: static elements.
Now you might be wondering what happens when elements are not on the same level. Let's dig into that now. Now as you see in the code, even if the yellow box has a higher z-index value compared to the blue one, it is positioned behind the blue box. This is because the yellow box is the child of the red box, and the z-index of the parent element always applies to its children as well.
Since the parent element has a lower z-index, its children inherit the same z-index value as well. This is due to something called stacking context. We establish a new stacking context by setting the z-index of an element to any integer. The new stacking context applies to any children of that element. Their stacking levels are now only within that stacking context, not the root stacking context. In the example below,. In the example below, even though. This is caused by the positioned element wrapping the grey box.
The grey box has a much higher z-index value, and should therefore be overlapping the blue box. All other browsers render this correctly. In Firefox version 2, a negative z-index value will position an element behind the stacking context instead of in front of the background and borders of the element that established the stacking context. Here is a screen capture displaying this bug in Firefox Applying the z-index property to elements on a page can provide a quick solution to various layout challenges, and allows designers to be a little more creative with overlapping objects in their designs.
Some of the practical and creative uses for the z-index property are discussed and shown below. The z-index property can be used as part of a CSS-based tooltip, as shown in the example below from trentrichardson.
There are dozens of quality light box scripts available for free use, such as the JQuery plugin FancyBox. Most, if not all of these scripts utilize the z-index property:. A unique combination of JQuery animation and z-index can create a unique effect for use in a slideshow or photo gallery, as shown in the example below from the usejquery. Polaroid Photo Gallery by Chris Spooner utilizes some CSS3 enhancements combined with z-index to create a cool re-stacking effect on hover.
Here are a few that make creative use of the z-index property:. This technique was described by Chris Coyier and used on the ringvemedia. Stacking contexts in CSS are a complex topic. Beginning developers should now have a good understanding of this property and avoid some of the common problems that arise when trying to implement it.
Additionally, advanced developers should have a stronger understanding of how proper use of z-index can provide solutions to countless layout issues and open doors to a number of creative possibilities in CSS design.
Just the things you can actually use. For a positioned box that is, one with any position other than static , the z-index property specifies:. The box does not establish a new local stacking context.
0コメント