vertical text covering content

Question

I am able to use http://jsfiddle.net/9pUu4/ code to have vertical text in table cell. Above this table is my horizontal navigation menu which expands into links upon hovering the tab with jquery ui menu. My problem is that when hover the tab above vertical text the text laid over the menu. But it doesn't happen when hover the horizontal text on the same row of the table; that is menu covers page content. This happens on chrome and firefox.

I tried messing with z-index issue with no luck. Does it have anything to do with the transform css property (-webkit-transform, -moz-transform)? Or jquery menu conflict with vertical text?

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

score 0 · Answer 1 · edited May 23 '17 at 12:29

After digging deeper in SO, How do I make sure my drop down menus overlap and cover anything on my page?, I suspect vertical text: transform origin; or simply vertical text comes after menu on page layout, may make this vertical text "on-top".

Anyways, adding this wrapper outside of the menu works.

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

More code

z-index = 1 as stated works, but I just want to make sure it covers everything.

vertical text covering content

1 Answers1