Flexbox is well-known for solving common layout problems such as sticky footers and equal-height columns. Beyond those capabilities, it also provides a few other useful features that aren’t so popular. Let’s explore two of them!
As you probably already know, the
z-index property works only on positioned elements. By default, all elements have
position: static and aren’t positioned. An element is “positioned” when its
position property is set to
However, an “unpositioned” element, such as a flex item can also receive the
z-index property. The CSS Flexible Box Layout spec says:
Flex items paint exactly the same as inline blocks [CSS21], except that order-modified document order is used in place of raw document order, and z-index values other than auto create a stacking context even if position is static.
To understand this behavior, consider the following example:
Here we define two elements: the
.front element and the
.back element. The
.front element has one child, a box with a number “1”. The
.front element itself is absolutely positioned. Specifically, it has
position: fixed and covers the entire viewport.
.back element is a flex container. It contains two child elements — boxes with numbers “2” and “3”. Based on what we’ve discussed above, we can set the
z-index property of its flex items, even if they aren’t positioned elements (i.e. they have
Notice that when we add
z-index: 2 to the flex items by clicking the button in the demo above, they are positioned on top of the
Flexbox and Auto Margins
By applying auto margins to flex items, we’re able to solve common UI patterns. To begin with, let’s assume that we want to build this typical header layout:
To build it, we’ll use flexbox. No floats, fixed widths, or anything like that.
Continue reading %Quick Tip: How z-index and Auto Margins Work in Flexbox%