向左滑動並確定位置

當懸停在黑色框上時，紅色框出現，但被另一個元素覆蓋。如何解決這個問題？向左滑動並確定位置

<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-18 Kurczakovsky

請張貼演示問題中的問題的代碼。人們無法閱讀或搜索到外部網站的鏈接，鏈接可能會過期。 – 2015-03-19 00:06:29

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

[編輯]（http://stackoverflow.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

如果你需要一些其他的東西，請評論:)

來源

2015-05-11 08:28:54

向左滑動並確定位置

回答

相關問題