CODEWITHSUNDEEP
htmlcsspseudo-element
Alex Garret jones
Alex Garret jones

Reputation: 39

pseudo element is overlapping main content though using z-index

I am using z-index with pseudo :after element and content(among them one is absolute positioned.) But not working.There is an element in code span which is absolute positioned. And the div timeline-items has an pseudo elements :after

ul.timeline-items {
  position: relative;
  margin-top: 35px;
}

ul.timeline-items li:after {
  position: absolute;
  content: '';
  top: 0;
  left: 15px;
  height: 100%;
  width: 1px;
  background: #2196F3;
  z-index: -9;
}

ul.timeline-items li {
  margin-left: 55px;
  list-style: none;
}

ul.timeline-items span {
  position: absolute;
  width: 30px;
  height: 30px;
  border-radius: 30px;
  box-shadow: 0 0px 35px #ddd;
  left: 0;
  text-align: center;
  padding: 5px 0;
  font-weight: 600;
  z-index: 99;
}

ul.timeline-items p {}
<ul class="timeline-items">
  <li>
    <span>1</span>
    <h4>Contextual Design</h4>
    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem
    </p>
  </li>
  <li>
    <span>2</span>
    <h4>Contextual Design</h4>
    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem
    </p>
  </li>
  <li>
    <span>3</span>
    <h4>Contextual Design</h4>
    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem
    </p>
  </li>
</ul>

Upvotes: 1

Views: 195

Answers (1)

Bhuwan
Bhuwan

Reputation: 16855

Its not the z-index issue...z-index is working fine...Its because your span does not have any background, its transparent...

Try to put a background in span...

ul.timeline-items {
  position: relative;
  margin-top: 35px;
}

ul.timeline-items li:after {
  position: absolute;
  content: '';
  top: 0;
  left: 15px;
  height: 100%;
  width: 1px;
  background: #2196F3;
  z-index: -9;
}

ul.timeline-items li {
  margin-left: 55px;
  list-style: none;
}

ul.timeline-items span {
  position: absolute;
  width: 30px;
  height: 30px;
  border-radius: 30px;
  box-shadow: 0 0px 35px #ddd;
  left: 0;
  text-align: center;
  padding: 5px 0;
  font-weight: 600;
  z-index: 99;
  background: #fff;
}

ul.timeline-items p {}
<ul class="timeline-items">
  <li>
    <span>1</span>
    <h4>Contextual Design</h4>
    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem
    </p>
  </li>
  <li>
    <span>2</span>
    <h4>Contextual Design</h4>
    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem
    </p>
  </li>
  <li>
    <span>3</span>
    <h4>Contextual Design</h4>
    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem
    </p>
  </li>
</ul>

Upvotes: 3

Related Questions