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大于工具栏的。

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

工具栏重叠我的按钮

3 个答案: