向左滑动并确定位置

问题描述：

当悬停在黑色框上时，红色框出现，但被另一个元素覆盖。如何解决这个问题？向左滑动并确定位置

<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

请张贴演示问题中的问题的代码。人们无法阅读或搜索到外部网站的链接，链接可能会过期。 – 2015-03-19 00:06:29

http://jsfiddle.net/k7bsutac/ – Kurczakovsky 2015-03-19 00:11:19

[编辑]（http://*.com/posts/29134491/edit）在问题*中包含代码*。堆栈溢出是为了让用户可以在网站上搜索答案而设计的，如果您只发布链接到代码，那么这种方法就不起作用。如果链接改变或到期，这个问题就没有任何意义。 – 2015-03-19 00:14:17

答

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

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}

改变悬停parrent的z-index和结果将是：
enter image description here

如果你需要一些其他的东西，请评论:)

向左滑动并确定位置

相关推荐