jQuery：我可以使用z-index來解決這個問題嗎？

在進入問題之前，我認爲最好是描述一下我正在嘗試做什麼...如果你去這個小提琴你可以看到它（雖然存在問題）在行動中：jQuery：我可以使用z-index來解決這個問題嗎？

http://jsfiddle.net/jhacks/xCcdn/99/（它需要有jQuery選擇工作）

我試圖解決這個帖子的問題是相當公然搞砸了小提琴。由於我的HTML的順序，工具提示（topTip）推通知圖標（topIconNew）向下時，它是存在的。顯然，通知圖標應該保持靜止。我不想重新訂購html，因爲通知圖標並不總是存在。因此，他們都可以使用相同的類別定位。我認爲解決方案應該是z-index？然而，我嘗試使用CSS來解決它似乎並不工作......我認爲我必須在jQuery中做些什麼？

如果有人可以幫助我在這裏會不勝感激。讓我知道如果我需要更清楚我在這裏做什麼，我會盡力更好地解釋。謝謝！

來源

2011-12-25 jstacks

你以前問過這個問題詢問，我很確信這一點。你可以將你的文本剝離到最低限度嗎？我無法從這段文字中提取你的問題。 – Blender 2011-12-25 23:51:29

我編輯了代碼和我的問題。我很欣賞這些反饋。我現在看到，可以用更少的代碼和文本來解決問題。希望我的編輯幫助。 – jstacks 2011-12-26 00:04:18

我希望得到正確的問題。我會建議使用絕對定位來保持顯示工具提示時的圖標。您還應該將.topIcon位置設置爲'相對'，以便工具提示的絕對位置與它相關。這些變化會有點像這樣。（不知道這個職位的實際數字。

.topIcon { 
    position: relative; 
} 

.topIconNew { 
    bottom:-20px; 
    right:14px; 
    position: absolute; 
}

來源

2011-12-26 00:11:55 cellcortex

謝謝你關於職位的CSS珍聞。我其實並沒有意識到，如果父項是相對的，絕對位置的孩子將與父母相關。這似乎可能會起作用。我會嘗試的。 – jstacks 2011-12-26 00:32:18

變化.topTip兩個CSS屬性，這些：

position: absolute; 
top: 40px; 
right: 0px;

並添加此CSS屬性.topIcon：

position: relative;

Updated jsFiddle

來源

2011-12-26 00:07:51

啊好的。這也是cellcortix上面所說的。這似乎是一個很好的方法來解決這個問題......我明白這一點。我認爲這是最好的解決方案。我學到了一些關於CSS的新東西。這對我來說也是非常有用的。謝謝！ – jstacks 2011-12-26 00:35:54

也許試試這個：http://jsfiddle.net/sdPVG/

我已經添加了一個負邊距來補償盒子高度和邊框寬度。這看起來有點冒失，但實際上在很多不同的瀏覽器中得到很好的支持。

Hoep幫助！

來源

2011-12-26 00:11:31

這裏有幾個參考文獻，您可能會發現有幫助：http://www.alistapart.com/articles/negativemargins，http://coding.smashingmagazine.com/2009/07/27/the-definitive-guide-to-使用負邊際/ – 2011-12-26 00:13:07

啊好的。因此，您使用負邊距將topTip推到topIconNew下方的位置。我懂了。這似乎也有效......除非topIconNew和topTip需要重疊？那麼我認爲問題仍然存在？只是要求未來的知識。 – jstacks 2011-12-26 00:34:25

是的，基本上是負邊距使元素佔用零空間;你實質上是在說它是100px寬，我只是減去100px，導致對內容流的影響爲0px。當您希望內容流中的元素從定位中受益而不影響其他任何內容時，這是一個很好的小竅門。即使你需要topIconNew和topTip重疊，這仍然有效，它只會歸結爲你分配給頂部和左側的值。 – 2011-12-26 00:40:51

變化

<a href="icon.html"><img src="icons/icon.png" /></a> 

<div class="topTip"> 
    <div class="topTipText">hello</div> 
</div> 
<div class="topDrop">What's up</div> 
<div class="topIconNew"></div>

到

<a href="icon.html"><img src="icons/icon.png" /></a> 
<div class="topIconNew"></div> 
<div class="topTip"> 
    <div class="topTipText">hello</div> 
</div> 
<div class="topDrop">What's up</div>

還增加.topIconOld作爲間隔的，你不也不會紅圖標保持距離。希望你會在看到這個fiddle這是我已經使用了共享等:-)

01第一次

來源

2011-12-26 00:28:42

謝謝你！我很感謝所有人在這裏的幫助。 :) – jstacks 2011-12-26 00:37:23

jQuery：我可以使用z-index來解決這個問題嗎？

回答

相關問題