工具栏与我的按钮重叠

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：代码现在工作在浏览器中，而不是内部节点的WebKit -webkit-app-region: no-drag;也使用。

Answer 1

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

另一种方法是给和button css定义你已经做出明确的z-index属性，并使该按钮成为更高的索引。

.toolbar { 
    z-index: 10000; 
} 

button { 
    z-index: 10001; 
} 

注：造型button将适用于网页上的所有按钮，所以你会过得更好写一个新的类此按钮specificly或含有类似.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; 
}