垂直文字涵盖内容

Question

我可以使用http://jsfiddle.net/9pUu4/代码在表格单元格中添加垂直文本。在这张桌子上方是我的水平导航菜单，它在用jquery ui菜单悬停标签时扩展为链接。我的问题是，当悬停在垂直文本上方的选项卡时，文本放在菜单上。但是当将水平文本悬停在表格的同一行上时不会发生这种情况;这是菜单涵盖页面内容。这发生在chrome和firefox上。

我试着搞乱z-index问题而没有运气。它与transform css属性（-webkit-transform，-moz-transform）有什么关系？或jquery菜单与垂直文本冲突？

.Vertical
{
  writing-mode:bt-rl;
  -webkit-transform:rotate(90deg);
  -moz-transform:rotate(90deg);
}

Answer 1

在深入挖掘SO How do I make sure my drop down menus overlap and cover anything on my page?之后，我怀疑是垂直文本：变换原点;或者只是在页面布局菜单后面出现垂直文本，可以使这个垂直文本“在顶部”。

无论如何，在菜单之外添加这个包装器就可以了。

#div1
{
    position : relative;   
    z-index : 1000;
}

More code

z-index = 1如上所述，但我只是想确保它涵盖所有内容。