html - z-index 不适用于 flex 元素内的文本

Question

我有一个 flex-container，里面有一些 flex-items，我有很多(我已经包裹在一个 span 中)，我想放在文本后面。

出于某种原因，z-index 不适用于此跨度元素。根据规范，flexbox 应该与 flex-container 和 flex-items 一起正常运行，但我似乎无法让白色文本位于黑色数字之上？ (或将数字推到文本后面，都可以)。

代码笔:https://codepen.io/emilychews/pen/rpjpmB

CSS

.row {
display: flex;
margin: auto;
padding: 1rem;
background-color: red;
width: 70%;
max-width: 1043px;
box-sizing: border-box;
}

#row-2 {background: red;}

#row-2 div {
  position: relative;
  box-sizing: border-box;
  margin: .5rem;
  padding: 2.488rem 1rem;
  flex: 1;
  z-index: 1;
}

#number1 {position: absolute; font-size: 7.4300rem; z-index: 1;}

#row-2 > div > h3, #row-2 > div > p {text-align: center; color: white; z-index:99;}

HTML

<div id="row-2" class="row">
  <div>
    <span id="number1">01</span>
    <h3>This is A Title</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  </div>
  <div>
    <h3>This is A Title</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  </div>
  <div>
    <h3>This is A Title</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  </div>
</div>

Answer 1

在 flex 容器中，z-index 无需定位属性 (source) 即可工作。

换句话说， flex 元素可以使用 z-index 和 position: static。

但是，您的文字不是 flex 元素。它是 flex 元素的子项，因此此 z-index 方法将不起作用。

作为解决方案，将 flex 元素放入(嵌套的) flex 容器中。

.row {
  display: flex;
  margin: auto;
  padding: 1rem;
  background-color: red;
  width: 70%;
  max-width: 1043px;
  box-sizing: border-box;
}
#row-1 {
  background: red;
}
#row-1 div {
  position: relative;
  box-sizing: border-box;
  margin: .5rem;
  padding: 2.488rem 1rem;
  flex: 1;
  z-index: 1;
  display: flex;           /* NEW */
  flex-direction: column;  /* NEW */
}
#number1 {
  position: absolute;
  font-size: 7.4300rem;
  z-index: 1;
}
#row-1 > div > h3,
#row-1 > div > p {
  text-align: center;
  color: white;
  z-index: 99;
  margin-bottom: 0;  
}

<div id="row-1" class="row">
  <div>
    <span id="number1">01</span>
    <h3>This is A Title</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  </div>
  <div>
    <h3>This is A Title</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  </div>
  <div>
    <h3>This is A Title</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  </div>
</div>