Issue
I'm trying to use absolute positioning nested in a table cell that "pops up" when mousing over it. The following works great in Firefox, but for some reason fails in Google Chrome. It looks like the absolute positioned text ignores its z-index, and appears "over" the higher-z-indexed div.
#c1 {
background-color: red;
}
#c2 {
background-color: green;
}
.cell {
display: inline-block;
width: 50px;
height: 50px;
transition: all .2s ease-in;
}
.cell:hover {
transform: scale(2);
z-index: 100;
}
.container {
position: relative;
height: 100%;
}
.absolute {
position: absolute;
z-index: 0;
}
<div class="cell" id="c1">
<div class="container">
<div class="absolute">TEST</div>
</div>
</div>
<div class="cell" id="c2">
<div class="container">
<div class="absolute">TEST2</div>
</div>
</div>
http://jsfiddle.net/P7c9q/323/
Is there anything I can do to avoid this, short of avoiding absolute positioning?
Solution
.cell:hover {
transform: scale(2);
z-index: 100;
}
this z-index is not working because .cell has a static position. Add position:relative to the cell class.
Answered By - andybeli
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.