Shuffling non-siblings with z-index

Question

I am trying to make the sidebar menu overlap content divwhere the active menu item is displayed above divand the inactive items appear below. The intersection between a uland divwould be small, but the interleaving effect would create an illusion of depth.

I understand that it z-indexapplies only to brother elements. So the following does not work:

#menu {z-index:0}
#menu li.active {z-index:2}
#content {z-index:1}

<ul id="menu">
  <li class="active">Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>
<div id="content">Side content</div>

Is there a good way to do this without making each menu item divat the same level as #content?

Answer 1

, z- CSS-, ? , , - , APPEARS div. , , , . .

Answer 2

z-index, li , . div, aactive li , div. , div. , , . , .

Answer 3

li z-index #menu:

#menu li {z-index:0}
#menu li.active {z-index:2}
#content {z-index:1}

, z-index .

Answer 4

, li div, - .

- , li div . , ul , z-index. . CSS ?, .

: z-index li div . , z-index , . position: relative.

#menu > li.active {
  position: relative;
  z-index: 2;
}
#content {
  position: relative;
  z-index: 1;
}

body {
  margin: 8px;
  position: relative;
}
#menu {
  margin: 0;
  padding: 5px 0;
  list-style: none;
}
#menu > li {
  padding-left: 15px;
  border: 1px solid;
  background: yellow;
  margin: 4px 0;
}
#menu > li.active {
  position: relative;
  z-index: 2;
}
#content {
  position: absolute;
  background: blue;
  top: 0;
  left: 5px;
  width: 5px;
  height: 100%;
  z-index: 1;
}

<ul id="menu">
  <li class="active">Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>
<div id="content"></div>

Hide result