CSS Force nested child behind parent with position:fixed - html

Question

I have a fixed menu bar that contains a simple <ul> <li> menu system. Upon li:hover I have a sub-menu system aside appear, and this is relative to each li. Unfortunately this aside is always appearing on top of all of the parents.
When I actually want it to be positioned behind the div#sidebar. Is this possible? I have not had much luck with z-index (including -1), any help would be appreciated!
<div id="sidebar">
<nav class="secondary">
<h2>Featured</h2>
<ul>
<li>
<a href="#">
<h3>Title</h3>
</a>
<aside class="article-card">
<h4>TITLE</h4>
<h5>TEXT</h5>
</aside>
</li>
</ul>
</nav>
</div>
ul {
list-style: none;
display: inline-block;
width: 59.6%;
margin-right: 9.1%;
float: right;
margin-bottom: 40px;
}
li {
display: block;
margin-bottom: 10px;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
#sidebar {
background: #253e40;
color: #8b8c91;
width: 215px;
height: 100%;
position: fixed;
top: 0;
bottom: 0;
right: 215px;
margin-right: -215px; /* "#sidebar" width */
z-index: 3;
}
#sidebar.active { margin-right: 0; }
#sidebar header {
font-weight: bold;
padding: 30px 20px 50px 20px;
border-bottom: 1px solid #8b8c91;
color: #8b8c91;
}
#sidebar footer {
background: none;
bottom: 40px;
padding: 0 20px;
position: absolute;
}
/* Nav */
#sidebar nav {
width: 100%;
margin: 20px 0 50px 0;
display: inline-block;
}
#sidebar ul {
width: 100%;
margin: 0;
}
#sidebar li {
margin-bottom: 0;
padding: 2px 20px;
}
#sidebar li:before {
content: none;
padding: 0;
}
.current-menu-item {
font-weight: bold;
color: #fff;
}
#sidebar a:hover {
color: #fff;
}
#sidebar nav.secondary h2 {
font-weight: bold;
color: #fff;
padding: 0 20px 15px 20px;
border-bottom: 1px solid #8b8c91;
}
#sidebar nav.secondary li {
padding: 15px 20px;
border-bottom: 1px solid #8b8c91;
}
#sidebar nav.secondary li:hover {
background: #252f37;
color: #fff;
}
/* Article Card Popout */
.article-card {
position: absolute;
background-color: #44484f;
display: inline-block;
width: 200px;
height: auto;
right: 15px;
border-left: 5px solid #be572b;
}
#sidebar nav.secondary li:hover .article-card {
right: 215px;
}
.article-card h4 {
font-weight: bold;
padding: 10px;
}
.article-card h5 {
color: #fff;
padding: 10px;
}
/* Transition animations */
#sidebar,
.article-card {
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.7s ease-in-out;
-ms-transition: all 0.7s ease-in-out;
-o-transition: all 0.7s ease-in-out;
transition: all 0.7s ease-in-out;
}
Fiddle

Answer 1

If you really want to keep that html, you need to create a new stacking context. #sidebar has position:fixed - elements inside sidebar are treated with a new stacking context that now begins at #sidebar and not at body level any more.
Children of the sidebar cannot be positioned below #sidebar.
To solve this add another container inside sidebar that contains all the background styling and is inside the same stacking context as your slideout.
ul {
list-style: none;
display: inline-block;
width: 59.6%;
margin-right: 9.1%;
float: right;
margin-bottom: 40px;
}
li {
display: block;
margin-bottom: 10px;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
#sidebar {
background: #253e40;
color: #8b8c91;
width: 215px;
height: 100%;
position: fixed;
top: 0;
bottom: 0;
right: 215px;
margin-right: -215px; /* "#sidebar" width */
z-index: 3;
}
#sidebar.active { margin-right: 0; }
.sidebar-content {
height: 100%;
background: #253e40;
}
#sidebar header {
font-weight: bold;
padding: 30px 20px 50px 20px;
border-bottom: 1px solid #8b8c91;
color: #8b8c91;
}
#sidebar footer {
background: none;
bottom: 40px;
padding: 0 20px;
position: absolute;
}
/* Nav */
#sidebar nav {
width: 100%;
margin: 20px 0 50px 0;
display: inline-block;
}
#sidebar ul {
width: 100%;
margin: 0;
}
#sidebar li {
margin-bottom: 0;
padding: 2px 20px;
}
#sidebar li:before {
content: none;
padding: 0;
}
.current-menu-item {
font-weight: bold;
color: #fff;
}
#sidebar a:hover {
color: #fff;
}
#sidebar nav.secondary h2 {
font-weight: bold;
color: #fff;
padding: 0 20px 15px 20px;
border-bottom: 1px solid #8b8c91;
}
#sidebar nav.secondary li {
padding: 15px 20px;
border-bottom: 1px solid #8b8c91;
}
#sidebar nav.secondary li:hover {
background: #252f37;
color: #fff;
}
/* Article Card Popout */
.article-card {
position: absolute;
z-index: -1; // z index put's it below .sidebar-content
background-color: #44484f;
display: inline-block;
width: 200px;
height: auto;
right: 15px;
border-left: 5px solid #be572b;
}
#sidebar nav.secondary li:hover .article-card {
right: 215px;
}
.article-card h4 {
font-weight: bold;
padding: 10px;
}
.article-card h5 {
color: #fff;
padding: 10px;
}
/* Transition animations */
#sidebar,
.article-card {
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.7s ease-in-out;
-ms-transition: all 0.7s ease-in-out;
-o-transition: all 0.7s ease-in-out;
transition: all 0.7s ease-in-out;
}
<div id="sidebar">
<div class="sidebar-content">
<nav class="secondary">
<h2>Featured</h2>
<ul>
<a href="#">
<li>Title
<aside class="article-card">
<h4>TITLE</h4>
<h5>TEXT</h5>
</aside>
</li>
</a>
</ul>
</nav>
</div>
</div>