工具栏与我的按钮重叠

Question

我正在将此应用程序移植到 node-webkit，并且我想制作自己的工具栏 + 关闭按钮。但是，我对css/html的了解并不多，我不知道如何做到这一点。

问题是我的工具栏与关闭按钮重叠，导致按钮无法使用。

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：代码现在可以在浏览器中运行，但不能在 node-webkit 内部使用 -webkit-app-region: no-drag;。

Answer 1

您可以将<button> 移动到工具栏内部或之前，以强制按钮具有更高的 z-index。

另一种方法是给 .toolbar 和 button css 定义你已经明确的z-index 属性，并使按钮具有更高的索引。

.toolbar {
  z-index: 10000;
}

button {
  z-index: 10001;
}

注意：button 的样式将应用于页面上的所有按钮，因此您最好为该按钮专门编写一个新类或包含像 .some-outer-element button 这样的选择器。

Answer 2

您可以使用 z-index 将按钮定位在工具栏的顶部。

.toolbar {
    z-index:1;
}

button {
    z-index:2;
}

DEMO

根据父元素中是否有其他元素，您可能需要使用 z-index 值来让它们以您想要的方式显示。只需确保按钮的 z-index 大于工具栏的 z-index。

Answer 3

使用它并检查..

.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;
}