z-index not applying correctly

Question

I have a landing menu that is made from SVG icons, and now I want to position a div behind these icons, but still inside the menu. Both of these elements have position:fixed, and top set as a percentage.

So what I want to do is to have the landingMenu in the back, then the landingMenuOrangeLine, then the miniNavButton (so the buttons are in front)

What I wanted to do is set the z-index of the elements in question in order to make the buttons appear in front of the div. Now what happens is that I set the z-index of .miniNavButton to 2, but when I inspect the element in the developer tools it says z-index:auto.

Can anyone point out what I'm doing wrong? I've setup a codepen in case you want to play around with it.

my html:

<div class="landingMenu">
    <div id="introductionButton" class="miniNavButton" (click)="changeState('landing')">
        <a>
            <svg class="icon icon-user">
                <use xlink:href="symbol-defs.svg#icon-user"></use>
            </svg>
        </a>
    </div>
    <div id="skillsButton" class="miniNavButton" (click)="changeState('skills')">
        <a>
            <svg class="icon icon-book">
                <use xlink:href="symbol-defs.svg#icon-book"></use>
            </svg>
        </a>
    </div>
    <div id="contactButton" class="miniNavButton" (click)="changeState('contact')">
        <a>
            <svg class="icon icon-envelop">
                <use xlink:href="symbol-defs.svg#icon-envelop"></use>
            </svg>
        </a>
    </div> 
</div>

<div id="landingMenuOrangeLine"></div>

my css:

.landingMenu {
  top: 1%;
  position: fixed;
  width: 100%;
  border-top: 0.1em solid white;
  border-bottom: 0.1em solid white;
  padding: 0.5em;
  background-color: #00B16A;
}

#landingMenuOrangeLine {
  width: 100%;
  height: 0.3em;
  background-color: #FF4C00;
  position: fixed;
  top: 5%;
  z-index: 1;
}

.miniNavButton {
  background-color: #4DC594;
  padding: 1em;
  margin: 0 7.5%;
  border-radius: 50%;
  display: inline-block;
  z-index: 2;
}

.icon-user,
.icon-book,
.icon-envelop,
.icon-eye,
.icon-embed,
.icon-hammer {
  width: 2em;
  height: 2em;
}

.contactLink {
  display: none;
}

add css position: absolute; for those circle ID or class – Iqbal Pasha Apr 20 '16 at 07:30 — Iqbal Pasha, Apr 20 '16 at 07:30

score 0 · Answer 1 · answered Apr 20 '16 at 07:31

0

Simple

.landingMenu {
    position: relative;
    z-index: 1;
}
#landingMenuOrangeLine{z-index:0;}

answered Apr 20 '16 at 07:31

Creative Enemy

399
4
22

I need the menu to stay fixed. Also this does not solve the issue – Miha Šušteršič Apr 20 '16 at 07:36
Ok if you change the landingMenu position value fixed. and set this z-index value higher then #landingMenuOrangeLine – Creative Enemy Apr 20 '16 at 07:38
the problem is that this will hide the orange line completely. I want the div - landingMenu in the back, then the orange line, then the miniNavButton. Updated question, sorry if it was unclear – Miha Šušteršič Apr 20 '16 at 07:41

score 0 · Answer 2 · edited May 23 '17 at 11:45

0

I think it's caused by your styles/HTML class names. .landingmenu should be .landingMenu.

See this Are class names in CSS selectors case sensitive?

If you want to have the .landingMenuOrangeLine follow the z-index, place it inside the .landingMenu.

edited May 23 '17 at 11:45

Community

1
1

answered Apr 20 '16 at 07:34

dork

4,396
2
28
56

fixed the typo, problem still the same – Miha Šušteršič Apr 20 '16 at 07:35
But the `.miniNavButton`s do have z-index: 2 when inspected. If you want the `.landingMenuOrangeLine` to be behind the buttons, you need to place that line inside the `.landingMenu`. – dork Apr 20 '16 at 07:41
putting the .landingMenuOrange line inside the landingMenu div solved it. Please update the answer so I can accept it. – Miha Šušteršič Apr 20 '16 at 07:44

Vincent G · Accepted Answer · 2016-04-20T07:45:28.630

0

You have a typo error : it's .landingMenu not .landingmenu

You also can play with the z-index property of it to make it appears in front of the orange line or behind.

EDIT

To make it have the desired output, you have to put your .miniNavButton in the same level of the two other div and put it in relative position. See codepen updated.

Codepen

edited Apr 20 '16 at 07:45

answered Apr 20 '16 at 07:34

Vincent G

8,547
1
18
36

fixed the typo, problem still the same – Miha Šušteršič Apr 20 '16 at 07:35

Iqbal Pasha · Answer 4 · 2016-04-20T07:49:11.353

0

Try with this below css by replacing..

#landingMenuOrangeLine {
  width: 100%;
  height: 0.3em;
  background-color: #FF4C00;
  position : absolute ;
  top : 50px;
  z-index : -1;
}

.miniNavButton {
  background-color: #4DC594;
  border-radius: 50%;
  width : 50px;
  height : 50px;
  display: inline-block;
  margin : 30px;
}

jsFiddle link https://jsfiddle.net/iqbalp95/3bekxmoj/1/

edited Apr 20 '16 at 07:49

answered Apr 20 '16 at 07:43

Iqbal Pasha

1,318
1
8
12

z-index not applying correctly

4 Answers4