0

I have a problem to show the menu in my fixed first column. I reused a nice example I found on jsFiddle to create a table with fixed first header and column. It works fine but I have a menu inside each cell of the first column and right now I can not see the menu because it is overlapped by the next row:

EDIT: I used a wrong exmaple. It looks like the main problem is with combination of z-index and possition: relative. I update my examples to two versions:

1) This is working example, menu if fully visible: https://jsfiddle.net/pescdoum/6/

But due to relative div inside the cell the div is above the first fixed column, try to scroll to the right.

div.relPos {
  position:relative;
  border: 1px solid blue;
  background: yellow;
}

2) So to make it work I add a z-index to the first fixed column to have it above the scroll area: https://jsfiddle.net/pescdoum/8/

But due to this now I have a problem again with the menus.

ul {
  list-style: none url();
  padding: 0px;
  margin: 0px;
  border: 1px solid red;
  position: absolute;
  background: yellow;
  left: 0px;
  display: none;
  z-index: 50; /* This will not help if table td contains relative elements */ 
}
Lodhart
  • 205
  • 1
  • 6
  • 14

1 Answers1

0

Set z-index of ul to 11

ul {
    list-style: none url();
    padding: 0px;
    margin: 0px;
    border: 1px solid red;
    position: absolute;
    background: yellow;
    left: 0px;
    display: none;
    z-index: 11; //this line
}
Awais
  • 4,752
  • 4
  • 17
  • 40