0

I want to place an ul li with triangular pointer over a scrollbar, like in the picture enter image description here

I've created the pointer but i can't get it to be over the scroll bar... I've tried z-index but it's not working. 

ul.faq_questions li:after {

content: "";
position: absolute;
width: 10px;
height: 10px;
background:#5d3c95;
-webkit-transform: rotate(-45deg);
right: -5px;
top: 40%;
z-index: 10;

}

Here is my Plunker

RoyBarOn
  • 919
  • 3
  • 24
  • 63
  • 4
    I don't think you can draw anything over browser's scrollbars (or if so, it may behave differently on different browsers). So maybe create your own scroll bar instead? – quinz Jun 12 '17 at 12:47
  • No you can not do this. You can create your own scrollbar more about this look at the following topic: https://stackoverflow.com/questions/9945547/how-to-create-a-custom-scrollbar-on-a-div-facebook-style – Markus G. Jun 12 '17 at 12:49
  • Quinz - thanks, i did - i got the scroll bar from here https://codepen.io/thetallweeks/pen/EaBpx – RoyBarOn Jun 12 '17 at 12:49
  • if you use position:fixed instead of absolute it would work. but you then need javascript to position it correctly – Mihai T Jun 12 '17 at 12:51
  • Mihai - i've tried it.. messed up the li.... thanks – RoyBarOn Jun 12 '17 at 12:58
  • how could it mess up the li ? :) using position fixed make the `:after` stay 'relative' to the entire document. so it won't stay relative to it's parent ( li ) . that's why you would need javascript to position each `:after` to it's corresponding `li` – Mihai T Jun 12 '17 at 13:04
  • Yeah well...it did so be cause i didn't used JS... i'm trying to work it out now.... – RoyBarOn Jun 12 '17 at 13:13
  • I didn't manage to fix it with JS, can you elaborate please? – RoyBarOn Jun 13 '17 at 06:13

0 Answers0