Different z-index for list and its scrollbar

Question

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.

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!

U K A · Accepted Answer

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;
}

Different z-index for list and its scrollbar

Answers (2)

Related Questions