html - How place the Logo over the content? (Z-Index is ignored) -

how can change css code, make logo (#logo) in left corner appear on other divs? high z-index value doesn't change position :/ example, when click on "salon" , scroll, picture , texts scroll on logo, not beneath.

here's link: http://hosting2022.esy.es/

/* header logo */  header {             width:100%;     position: fixed;     top: 0px;     z-index:2000;     height: 80px; }  #header-wrapper {     width: 1280px;     margin: 0 auto;     z-index:9999;     height:80px;     line-height:80px;     position:relative;       }  #logo {     margin:20px 0;     height:40px;     width:auto;     float:left; }  /* main div menu , content-div*/  #mainx {   padding: 0 0 0 0 !important;  margin: 0 !important;  border: 0 !important;   position: fixed;   z-index: 11000; }  /* menu div */  #menuxx {     line-height:50%;     z-index:21000;     top:35px;     right:105px;     width:450px;     height:70px;     position:fixed;     }  /*content div -> should placed under logo , menu*/  #salon { top:0; margin-left: auto; margin-right: auto; width: 100%; height:100%; position:fixed; overflow:hidden; } 

add css style

#content {     position: relative;     z-index: 100; }