z-index does not work on li navbar

Question

I use the navbar bootstrap (.navbar-inverse, .navbar-static-top) and I would like to apply a z-index to a particular "li" so that it passes over a div opacity to 0.5. (the "be stronger" "li")

http://www.bootply.com/132530

Problem: even with a z-index and position: relative, "li" is not displayed over the div.

I tried to apply this css to each parent li, one by one, but it only works for the last parent: div.navbar

<div style="z-index:8888" class="navbar navbar-inverse navbar-static-top"> 

works, but I do not want to show all the navbar

Is it possible to show only this "li" ?

thank you in advance

Answer 1

No, you can't. You will need to change your HTML markup in order to do that.

"If an element B sits on top of element A, a child element of element A can never be higher than element B."

source