CODEWITHSUNDEEP
htmlz-index
Martin
Martin

Reputation: 1

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

how can i change the CSS code, to make the Logo (#logo) in the left corner appear OVER all the other divs? A high z-index value doesn't change the position :/ For example, when you click on "Salon" and scroll, the picture and texts scroll over the logo, not beneath.

Here's the link: http://hosting2022.esy.es/

/* HEADER WITH 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 WITH MENU AND CONTENT-DIV*/

#mainx {
  padding: 0 0 0 0 !important;
 margin: 0 !important;
 border: 0 !important;
  position: fixed;
  z-index: 11000;
}

/* THE MENU DIV */

#menuxx {
    line-height:50%;
    z-index:21000;
    top:35px;
    right:105px;
    width:450px;
    height:70px;
    position:fixed;
    }

/*CONTENT DIV -> Should be placed under the logo and menu*/

#Salon {
top:0;
margin-left: auto;
margin-right: auto;
width: 100%;
height:100%;
position:fixed;
overflow:hidden;
}

Upvotes: 0

Views: 1807

Answers (4)

Divyang
Divyang

Reputation: 11

Add this css to your style

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

Upvotes: 1

Shrinivas Shukla
Shrinivas Shukla

Reputation: 4453

Add style to your <header> tag

<header style="z-index: 100;">

This is how it looks after..

enter image description here

Upvotes: 0

Ahs N
Ahs N

Reputation: 8386

The the z-index being applied to your #logo element will not work because it is supposed to have a position of either relative, fixed or absolute position.

Upvotes: 0

Keammoort
Keammoort

Reputation: 3075

Just add this to your styles (decreased z-index on .mainx)

.mainx {
    z-index: 2500;
}

Your current solution will not work since you assigned:

#logo {
    z-index: 3000;
}

and

.mainx {
    z-index: 11000;
}

Upvotes: 0

Related Questions