Z索引不适用于flex项目内的文本

Question

我有一个flex容器，里面有一些flex项目，我有大量的项目(我已经包装在span中)，我想让它们坐在文本后面。

由于某些原因，z-index在此span项上不起作用。根据规范，flex-container和flex-item都应该正常工作，但我似乎不能将白色文本放在黑色数字的顶部？(或者按下文本后面的数字，这两种方式都可以)。

codepen：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 items可以在position: static中使用z-index。

但是，您的文本不是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>

​

Answer 2

<div id="row-2" class="row">
  <span id="number1">01</span>
  <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>
    <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>

将包含第一个父级的跨度向上移动。

codepen

Answer 3

将#number1 1 z-index更改为-1

​

.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;
}

#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;}

<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>

​