Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /css/css-flexbox/flexbox-items-as-stacking-contexts-003.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<!--
Any copyright is dedicated to the Public Domain.
-->
<!-- This testcase checks that flex items are painted as pseudo-stacking
contexts, instead of full stacking contexts. In other words, content
inside of one flex item should be able to iterleave between pieces of
content in another flex item, if we set appropriately interleaving
"z-index" values. -->
<!-- This was resolved by the CSSWG in April 2013:
<html>
<head>
<title>CSS Test: Testing that flex items paint as pseudo-stacking contexts (like inline-blocks), instead of full stacking contexts: 'z-index' should let descendants interleave</title>
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
<link rel="match" href="flexbox-items-as-stacking-contexts-003-ref.html">
<style>
.flexContainer {
background: orange;
display: flex;
justify-content: space-between;
width: 70px;
height: 20px;
padding: 2px;
margin-bottom: 2px;
}
.item1 {
background: lightblue;
width: 30px;
min-width: 0; /* disable default min-width:auto behavior */
padding: 2px;
}
.item2 {
background: yellow;
width: 30px;
padding: 2px;
}
.grandchildA {
background: purple;
width: 80px;
height: 6px;
position: relative;
z-index: 10;
}
.grandchildB {
background: teal;
width: 80px;
height: 6px;
position: relative;
z-index: 20;
}
.grandchildC {
background: lime;
width: 20px;
height: 16px;
position: relative;
/* This z-index should interleave this content
between grandchildA and grandchildB: */
z-index: 15;
}
</style>
</head>
<body>
<!-- This flex container's first flex item has content that overflows
and overlap the second flex item. The z-index values are set such
that this content should interleave; grandchildC should
paint on top of grandchildA, but underneath grandchildB. -->
<div class="flexContainer"
><div class="item1"
><div class="grandchildA"></div
><div class="grandchildB"></div
></div
><div class="item2"
><div class="grandchildC"></div
></div
></div>
</body>
</html>