z-index 在 li 导航栏上不起作用

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

Answer 2

Thank you all for your replies, I explored different solutions, but nothing works.

@ Matheus: I can not change my HTML markup for several reasons, I will find a way to bring up another li I would move in javascript.

I know it is not clean, but in my situation, I can not do anything else.

Thank you again.