toolbar overlaps my button

Question

I'm porting this app to node-webkit and I wanted to make my own toolbar + close button. However, my knowledge of css/html is not that big, and I can't figure out how to make this work.

The problem is that my toolbar overlaps the close button thus making the button unusable.

CSS:

.toolbar{
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 32px;
    -webkit-user-select: none;
    -webkit-app-region: drag;
    background: #776e65;
    cursor: pointer; }

button {
  -moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
  -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
  box-shadow:inset 0px 1px 0px 0px #ffffff;
  background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
  background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
  background-color:#ededed;
  -webkit-border-top-left-radius:6px;
  -moz-border-radius-topleft:6px;
  border-top-left-radius:6px;
  -webkit-border-top-right-radius:6px;
  -moz-border-radius-topright:6px;
  border-top-right-radius:6px;
  -webkit-border-bottom-right-radius:6px;
  -moz-border-radius-bottomright:6px;
  border-bottom-right-radius:6px;
  -webkit-border-bottom-left-radius:6px;
  -moz-border-radius-bottomleft:6px;
  border-bottom-left-radius:6px;
  text-indent:0;
  border:1px solid #dcdcdc;
  display:inline-block;
  color:#777777;
  font-family:arial;
  font-size:15px;
  font-weight:bold;
  font-style:normal;
  height:30px;
  width:30px;
  position: fixed;
    top: 0;
    right: 0;

HTML:

<div class="toolbar">

<button id="close">x</button>

JS:

onload = function() {

  var closeNode = document.getElementById('close');
  if (closeNode) {
    closeNode.onclick = function() {
      window.close();
    };
  }
}

UPD: Code now works in the browser, but not inside node-webkit -webkit-app-region: no-drag; was also used.

Answer 1

You can use z-index to position the button on top of the toolbar.

.toolbar {
    z-index:1;
}

button {
    z-index:2;
}

DEMO

Depending on whether or not you have other elements in the parent element, you may need to play with the z-index values to get them to show up how you want. Just make sure that the button's z-index is larger than the toolbar's.

Answer 2

You can move your <button> inside of the toolbar or before it to force the button to have a higher z-index.

The other way is to give the .toolbar and button css definitions you've made an explicit z-index attribute, and make the button a higher index.

.toolbar {
  z-index: 10000;
}

button {
  z-index: 10001;
}

NOTE: styling button will apply to all buttons on the page, so you would be better off writing a new class for this button specificly or containing the selector like .some-outer-element button.

Answer 3

use this and check..

.toolbar{
          width: 100%;
        height: 32px;
        -webkit-user-select: none;
        -webkit-app-region: drag;
        background: #776e65;
        cursor: pointer; 
}

    button {
        float:right;
      -moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
      -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
      box-shadow:inset 0px 1px 0px 0px #ffffff;
      background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
      background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
      filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
      background-color:#ededed;
      -webkit-border-top-left-radius:6px;
      -moz-border-radius-topleft:6px;
      border-top-left-radius:6px;
      -webkit-border-top-right-radius:6px;
      -moz-border-radius-topright:6px;
      border-top-right-radius:6px;
      -webkit-border-bottom-right-radius:6px;
      -moz-border-radius-bottomright:6px;
      border-bottom-right-radius:6px;
      -webkit-border-bottom-left-radius:6px;
      -moz-border-radius-bottomleft:6px;
      border-bottom-left-radius:6px;
      border:1px solid #dcdcdc;
      display:inline-block;
      color:#777777;
      font-family:arial;
      font-size:15px;
      font-weight:bold;
      font-style:normal;
      height:30px;
      width:30px;
}