手风琴面板将无法打开（我该如何使div落后于其他人）

Question

Im making a personal website here and i need a div in the background that goes from the top to the botton. (In this case its the one named 'sidebar' and is red.) When i added this it kinda broke the accordion panels i had. Im guessing its something with the z-index, or position relative. Or maybe i need to add a z-index to all for them to make them come to top. Not sure, any help would be appreciated.

CSS fo the sidebar div:

#sidebar{
height: 720px;
width: 270px;
background-color: red;
z-index: -1;
position: relative;
}

Here is a FIDDLE: https://jsfiddle.net/dvr2pm6x/

Answer 1

You have z-index: -1; on #sidebar . That will put it behind body and any other element it might overlap that has either no z-index or a higher z-index , which makes #sidebar unclickable. Just to illustrate, you can set position: relative; z-index: -2; position: relative; z-index: -2; on body and then you can click #sidebar . demo .

Remove the negative z-index and #sidebar will be clickable. https://jsfiddle.net/dvr2pm6x/3/

Answer 2

You would want to make the sidebar position as absolute. here is the fiddle https://jsfiddle.net/dvr2pm6x/1/

#sidebar{
    height: 720px;
    width: 270px;
    background-color: red;
    z-index: -1;
    position: absolute;
}