css - Firefox 中滚动条拇指的 Z-index

Question

我正在尝试在 Firefox 中设置滚动条的样式，以实现 OS X Lion 中滚动条的外观。这是我的时尚代码：

scrollbarbutton {-moz-appearance: none !important}

scrollbar, scrollcorner { -moz-appearance: none !important;
background-color: transparent !important;
}

scrollbar[orient='vertical'] { border-left: 0; -moz-transform:translateX(10px)}
scrollbar[orient='horizontal'] { border-top: 0; }

thumb { -moz-appearance: none !important;
border-color: red !important;
background: transparent;
opacity: .5;
border-style: solid;
}

thumb:hover, thumb:active {opacity: 1}

thumb[orient='vertical'] {
-moz-border-image: url(http://i.imgur.com/mxzFF.png) 15 0 15 0 fill;
border-width: 8px 0 8px 0;
-moz-transform:translateX(-10px);
z-index: 10000
}

但是，z-index 设置什么也不做，页面内容覆盖滚动条缩略图。

Answer 1

将您的最后一个 css 块更改为：

thumb[orient='vertical'] { 
-moz-border-image: url(http://i.imgur.com/mxzFF.png) 15 0 15 0 fill; 
border-width: 8px 0 8px 0; 
-moz-transform:translateX(-10px); 
position: relative;
z-index: 10000;
}