Daniel Kobe February 2016

Z-index settings not working, dropdown menu should be behind file button

I left out some HTML & CSS I didn't think was important but its all in the fiddle. I'd like the menubar to be behind the file button, see expected and actual result images at bottom.

JSFiddle

HTML

<div class="menubar">

    <div class="dropdown" id="file-btn">
      <button href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">File <span class="caret"></span></button>
      <ul class="dropdown-menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li role="separator" class="divider"></li>
        <li><a href="#">Separated link</a></li>
        <li role="separator" class="divider"></li>
        <li><a href="#">One more separated link</a></li>
      </ul>
    </div>
</div>

CSS

html,
body {
  height: 100%;
}

.analysis {
  display: flex;
  flex-direction: column;
  height: 100%;
}


/* MENUBAR */

.menubar {
  height: 35px;
  font-size: 12px;
  background-color: #eee;
  border: hsl(0, 0%, 75%) solid 1px;
  border-right: none;
  border-left: none;
  position: relative;
}

/* VIEWS-CTRLS-CNTNR */

#view-ctrls-cntnr {
  display: inline-block;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

#view-ctrls-cntnr button {
  font-size: inherit;
}


/*view-ctrls-cntnr */

/* FILE-BTN */

#file-btn {
  margin-left: 34px;
  display: inline-block;
  height: 100%;
  z-index: 100;
}

#file-btn button {
  line-height: 30px;
  color: black;
  background-color: transparent;
  border: none;
}

#file-btn button:focus {
  background-color: white;
        

Answers


zgood February 2016

Try adding the following styles to #file-btn button

#file-btn button {
    /*previous styles*/
    position: relative;
    z-index: 99;
}

Also increase the margin-top of your dropdown to -2 to account for the 1 px border and 1px overlap

#file-btn .dropdown-menu {
  margin-top: -2px;
  /*other styles*/
}

Updated fiddle


Rogier Spieker February 2016

The button doesn't have a z-index nor stacking context, you currently have z-ordered the menu itself (which is confusingly named #menu-btn).

#file-btn {
  margin-left: 34px;
  display: inline-block;
  height: 100%;
}

#file-btn button {
  position: relative;
  line-height: 30px;
  color: black;
  background-color: transparent;
  border: none;
  z-index: 100;
}

fixed fiddle


J. Bush February 2016

The z-index property only works for positioned elements (See here). You will therefore need to make your elements with z-index have their position be relative, absolute, or fixed. I would recomend position:relative as this will not change the positioning of your elements.

Post Status

Asked in February 2016
Viewed 2,352 times
Voted 14
Answered 3 times

Search




Leave an answer