Problem with z-index
- by ripper234
I'm trying to use z-index to layer a button and a div. The button appears behind the div, while according to z-index it should be in front of it. Here is the style elements associated with the button & div as captured by Firebug:
Button
button {
position:relative;
z-index:2;
}
Site.css (line 356)
Inherited fromdiv#note19.sticky
.sticky {
text-align:center;
}
Site.css (line 360)
Inherited fromtd.taskcell
.taskcell {
text-align:center;
}
Site.css (line 345)
Inherited fromtable.tasksgrid
table {
border-collapse:collapse;
}
Site.css (line 221)
Inherited frombody
element.style {
cursor:auto;
}
body {
color:#696969;
font-family:Verdana,Helvetica,Sans-Serif;
font-size:0.75em;
}
Div
.sticky .edit {
height:100px;
position:relative;
vertical-align:middle;
width:150px;
z-index:1;
}
Site.css (line 371)
Inherited fromdiv#note18.sticky
.sticky {
text-align:center;
}
Site.css (line 360)
Inherited fromtd.taskcell
.taskcell {
text-align:center;
}
Site.css (line 345)
Inherited fromtable.tasksgrid
table {
border-collapse:collapse;
}
Site.css (line 221)
Inherited frombody
element.style {
cursor:auto;
}
body {
color:#696969;
font-family:Verdana,Helvetica,Sans-Serif;
font-size:0.75em;
}
Note that the button has a z-index of 2, the div has a z-index of 1, and both are position:relative.
Edit - full HTML is in this pastebin.
