javascript - 工具栏与我的按钮重叠

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

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

.toolbar {
    z-index:1;
}

button {
    z-index:2;
}

DEMO

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