0

I have a scenario where I need to "activate" a selection of text and "bring it forward", by setting opacity to 1 from a default of 0.5. I can't bring an element forward though by setting a higher z-index. I've tried playing with position: relative but no success. See the snippet, by setting a higher z-index to .c1, .c2 is still visible. Any ideas?

mark {
  background-color: transparent;
  padding: 0;
  font-weight: normal;
}

.c1 {
  background: rgb(255,236,132);
  z-index: 1;
}

.c2 {
  background: rgb(254,183,183, 0.5);
}
<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <mark class="c1">Ut enim ad minim veniam, quis nostrud exercitation ullamco <mark class="c2">laboris nisi ut aliquip ex ea commodo consequat. Duis</mark> aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat</mark> cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>

By setting a z-index to the first element, it still remains in the back of the second element.

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
somonek
  • 373
  • 1
  • 6
  • 13
  • position:relative and z-index:-1 to c2 (remove z-index from c1) – Temani Afif Jun 30 '20 at 11:31
  • @TemaniAfif that solution makes the text disappear as well. – somonek Jun 30 '20 at 11:48
  • which is logical since you want c2 under c1 and the color of c1 is opaque – Temani Afif Jun 30 '20 at 11:50
  • @TemaniAfif the content of c2 is also part of c1 though. How can I preserve it? That is what I mean by "bring it forward" in my question. – somonek Jun 30 '20 at 11:53
  • @TemaniAfif I also have a click handler on both (to "activate" or "bring forward"). z-index: -1 on c2 makes it unclickable even if it's partly outside of c1 and not completely overlapped – somonek Jun 30 '20 at 11:56
  • edit your question to add more details and if possible show us a screenshot of the result you want because actually it's not clear what you want. – Temani Afif Jun 30 '20 at 12:03

0 Answers0