Question

我有一个flex-container里面有一些flex-items，我有一个很大的数字（我已经包裹在一个范围内），我想要坐在文本后面。

由于某种原因，z-index不适用于此span项。根据规范，flexbox应该与flex-container和flex-items表现正常，但我似乎无法将白色文本放在黑色数字的顶部？（或推文后面的数字，或者没问题。）

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）即可运行。

换句话说，弹性项目可以z-index使用position: static。

但是，您的文字不是弹性项目。它是flex项的子项，因此z-index方法无法正常工作。

作为解决方案，将flex项目放入（嵌套的）flex容器中。

＆＃13;

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

＆＃13;

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

＆＃13;

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

z-index不处理flex项目内的文本

3 个答案: