向左浮动并且绝对位置

Question

当悬停在黑匣子上时，会出现红色，但被另一个元素覆盖。如何解决这个问题？

<div class="gridek grid"><div class="tooltip">hej</div></div>
<div class="gridek grid"><div class="tooltip">hej</div></div>
<div class="gridek grid"><div class="tooltip">hej</div></div>

.grid {width:60px;height:60px;float:left;z-index:5;position:relative;background:black}
.grid:hover .tooltip {display:block}
.tooltip {display:none;position:absolute;top:0;left:0;background:red;padding:50px;z-index:7}

Demo

Answer 1

嗯，由于z-index，红框被裁剪。您可以通过简单的.grid:hover { z-index:6 }

更改悬停的parrent的z-index

https://jsfiddle.net/k7bsutac/1/

<div class="gridek grid"><div class="tooltip">hej</div></div>
<div class="gridek grid"><div class="tooltip">hej</div></div>
<div class="gridek grid"><div class="tooltip">hej</div></div>
.grid {width:60px;height:60px;float:left;z-index:5;position:relative;background:black}
.grid:hover .tooltip {display:block}
.grid:hover { z-index:6 }
.tooltip {display:none;position:abolute;top:30px;right:30px;background:red;padding:50px;z-index:7}

结果将是：

如果您还需要其他信息，请发表评论：）