2

I have a flex-container with some flex-items inside, and I have a large number (that I've wrapped in a span), that I want to have sit behind the text.

For some reason the z-index isn't working on this span item. According to the spec, flexbox should behave normally with both flex-containers and flex-items, but I can't seem to get the white text to sit on top of the black number? (or push the number behind the text, either is fine).

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>
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
pjk_ok
  • 618
  • 7
  • 35
  • 90
  • 1
    Give #row-1 div p and #row-1 div h3 elements both a position:relative and it should work. – ecg8 Dec 27 '17 at 00:29
  • That deep nesting is going to bite you later on if your bringing that code to production. Consider using a class on that last p tag instead of nesting that deep. I believe putting relative position on the elements ecg8 suggested should do the trick. – grimesd Dec 27 '17 at 03:16

3 Answers3

1

In a flex container, z-index works without the need for positioning properties (source).

In other words, flex items can use z-index with position: static.

However, your text is not a flex item. It is a child of a flex item, so this z-index method won't work.

As a solution, make the flex items into (nested) flex containers.

.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>
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
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>

move the span wich contains the number one parent up.

codepen

C.Schubert
  • 2,034
  • 16
  • 20
0

change #number1 z-index to -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>
Ganesh Putta
  • 2,622
  • 2
  • 19
  • 26