Q:

Different z-index for list and its scrollbar

I have a small question: 
link to file : http://codepen.io/anon/pen/WQvBBr 
I have a html file with the buttons and then a list of links. 
Both elements (buttons and list) are located on the right side of the page, 
The list appears above the buttons, 
because it's written after the buttons in the html file. 
Both of them are clickable. 
My question is about the scrollbar, which should appear with the list on the right side, but he appears behind the buttons. 
I tried to solve it by adding z-index:-1 to buttons style ( # Rand_users) 
It solves it, but makes the buttons not clickable. 
<html>
<head>
    <meta charset="windows-1255">
    <title>page</title>
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.css" />

</head> 
<body>
<div id="fixed-header"></div> 
<div id="center"> 
<button id="rand_users" style="bottom:-5px;left:1017px;" onclick="window.alert('button 4');">button 4</button>
<button id="rand_users" style="bottom:160px;left:1017px;" onclick="window.alert('button 9');">button 9</button>
<!-- <button id="rand_users" style="bottom:325px;left:1017px;" onclick="window.alert('button 12');">button 12</button> -->
<ul id="list" >
  <li><a href="" onclick="window.alert('link1');" class="le" >1 </a></li>
  <li><a href="" class="le" >2</a></li>
  <li><a href="" class="le" >3</a></li>
  <li><a href="" class="le" >4</a></li>
  <li><a href="" class="le" >5</a></li>
  <li><a href="" class="le" >6</a></li>
  <li><a href="" class="le" >7</a></li>
  <li><a href="" class="le" >8</a></li>
  <li><a href="" class="le" >9</a></li>
  <li><a href="" class="le" >10</a></li>
  <li><a href="" class="le">11</a></li>
  <li><a href="" class="le" >12</a></li>
  <li><a href="" class="le" >13</a></li>
  <li><a href="" class="le" >14</a></li>
  <li><a href="" class="le" >15</a></li>
  <li><a href="" class="le" >16</a></li>
  <li><a href="" class="le" >17</a></li>
  <li><a href="" class="le" >18</a></li>
  <li><a href="" class="le" >19</a></li>
  <li><a href="" class="le" >20</a></li>
</ul> 
</div>  
<div id="fixed-footer"></div>
</body>
</html>

the css code:
  div#fixed-header {
    z-index:1;
    height:120px;
    position:fixed;
    top:0px;
    left:0px;
    width:100%;
    background:black;
}

    div#center {
    position:fixed;
    top:120px;
    bottom:35px;
    width:100%;
    background:white;
}

    div#fixed-footer {
    height:35px;
    position:fixed;
    bottom:0px;
    left:0px;
    width:100%;
    background:black;
}

    #list
    {   
    list-style-type:none;
    text-align:right;
    list-style-position: inside;
    overflow:hidden; 
    overflow-y:scroll;
    height:100%;
}

    #list a:hover {
    color: black;
    text-decoration: underline;
}

    #rand_users 
    /* button */
    {
    /*  z-index:-1;  */
    position:absolute;   
    width: 350px;
    height: 170px;
    background: yellow;
    border: 5px solid blue; 
}

    .le {
    display: inline-block;
    position: relative;
    background: grey;
    padding: 5px  15px 5px 15px;
    color: white;
    font-size: 15px;
    font-weight: bold;
}

    .le:after {
    content: '';
    display: block;  
    position: absolute;
    right: 100%;
    top: 33%;
    margin-top: -10px;
    width: 0;
    height: 0;
    }

thanks! 

A:

If your only issue is 

My question is about the scrollbar, which should appear with the
  list on the right side, but he appears behind the buttons

Then try running the snippet below, a little adjustment to yours.

 div#fixed-header {
 z-index:1;
 height:10%;
 position:fixed;
 top:0px;
 left:0px;
 width:100%;
 background:black;
}
div#center {
 position:fixed;
 top:10%;
 bottom:35px;
 width:100%;
 background:white;
}
div#fixed-footer {
 height:35px;
 position:fixed;
 bottom:0px;
 left:0px;
 width:100%;
 background:black;
}

#list
{ 
 list-style-type:none;
  text-align:right;
  list-style-position: inside;
  overflow:hidden; 
  overflow-y:scroll;
 height:100%;
  position: fixed;
  right: 0;
  top: 10%;
  width:80px;
}
#list > li {
  min-width: 30px;
}
#list a:hover {
    color: black;
    text-decoration: underline;
}

.rand_users /* button */
{
  position:absolute;   
 width: 350px;
 height: 170px;
 background: yellow;
 border: 5px solid blue; 
    right: 0;
}

.le {
  display: inline-block;
  position: relative;
  background: grey;
  padding: 5px  15px 5px 15px;
  color: white;
  font-size: 15px;
  font-weight: bold;
  min-width: 25px;
}
.le:after {
 content: '';
 display: block;  
 position: absolute;
 right: 100%;
 top: 33%;
 margin-top: -10px;
 width: 0;
 height: 0;
}
   
> 

<body>
<div id="fixed-header"></div> 
<div id="center">  

<button class="rand_users" style="bottom:-5px;" onclick="window.alert('button 4');">button 4</button>
<button class="rand_users" style="bottom:160px;" onclick="window.alert('button 9');">button 9</button>
<!-- <button id="rand_users" style="bottom:325px;left:1017px;" onclick="window.alert('button 12');">button 12</button> -->

<ul id="list" >
  <li><a href="" onclick="window.alert('link1');" class="le" >1 </a></li>
  <li><a href="" class="le" >2</a></li>
  <li><a href="" class="le" >3</a></li>
  <li><a href="" class="le" >4</a></li>
  <li><a href="" class="le" >5</a></li>
  <li><a href="" class="le" >6</a></li>
  
  <li><a href="" class="le" >7</a></li>
  <li><a href="" class="le" >8</a></li>
  <li><a href="" class="le" >9</a></li>
  <li><a href="" class="le" >10</a></li>
  
  <li><a href="" class="le">11</a></li>
  <li><a href="" class="le" >12</a></li>
  <li><a href="" class="le" >13</a></li>
  <li><a href="" class="le" >14</a></li>
  
  <li><a href="" class="le" >15</a></li>
  <li><a href="" class="le" >16</a></li>
  <li><a href="" class="le" >17</a></li>
  
   <li><a href="" class="le" >18</a></li>
  <li><a href="" class="le" >19</a></li>
  <li><a href="" class="le" >20</a></li>
</ul> 
</div>  


<div id="fixed-footer"></div>

</body>

