Flexbox, z-index & position: static: Why isn’t it working?

by

Like you wrote in your question, elements do not need to be positioned for z-index to work in a flex container.

Flex items can participate in a z-index stacking order even with position: static, which is not true for other CSS box models (except Grid) where z-index only works on positioned elements.

4.3. Flex Item Z-Ordering

Flex items paint exactly the same as inline blocks, 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.

The reason z-index isn’t working in your code is that div.header and div.core are not flex items. They are children of body, but body is not a flex container.

In order for z-index to work here, you’ll need to apply display: flex to body.

Add this to your code:

body {
    display: flex;
    flex-direction: column;
}

Revised Demo

More details: https://stackoverflow.com/a/35772825/3597276

More Related Contents:

  1. Center one and right/left align other flexbox element
  2. Flex / Grid layouts not working on button or fieldset elements
  3. Proper use of flex properties when nesting flex containers
  4. Center and bottom-align flex items
  5. Why doesn’t percentage padding / margin work on flex items in Firefox and Edge?
  6. Flexbox: 4 items per row
  7. Equal height columns with CSS
  8. Absolutely positioned flex item is not removed from the normal flow in IE11
  9. Make flex items take content width, not width of parent container
  10. Minimum and maximum value of z-index?
  11. Heights rendering differently in Chrome and Firefox [duplicate]
  12. Using flex order property to re-arrange items for desktop and mobile views
  13. Flexbox fill available space vertically
  14. Flexbox not giving equal width to elements
  15. Rendering problems using flexbox in Firefox and Chrome 48 [duplicate]
  16. Equal space between flex items
  17. How can I make a display:flex container expand horizontally with its wrapped contents?
  18. Why does percentage padding break my flex item?
  19. How to center-align one flex item and right-align another using Flexbox [duplicate]
  20. Why is there vertical scroll on the main container?
  21. Auto Resize Image in CSS FlexBox Layout and keeping Aspect Ratio?
  22. How can I show three columns per row?
  23. How can I create a row-based masonry layout using CSS?
  24. How do I get a flexbox to have a center fixed and a bottom fixed children together?
  25. How do I make flex box work in safari?
  26. Zebra striping a flexbox table with wrapping items
  27. Element with “display: inline-flex” has a strange top margin
  28. Pin a flex item to the bottom of the container
  29. Aligning to the bottom in flexbox
  30. Sizing flex items on the last row

Leave a Comment