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

问题描述 投票:2回答:3

我有一个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>
html css css3 flexbox z-index
3个回答
1
投票

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

换句话说,flex项目可以使用z-indexposition: static

但是,您的文本不是弹性项目。它是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>

0
投票
<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


0
投票

将#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>
© www.soinside.com 2019 - 2024. All rights reserved.