2格相互覆蓋

-3

我有什麼是這樣的：2格相互覆蓋

<style> 
#main{position:relative; width:600px; height: 600px;} 
#cover{position:absolute} 
#image{position:absolute} 
</style> 

<div id="main"> 
    <div id="cover"><img src="template.png" /></div> 
    <div id="image"><img src="user.jpg" /></div> 
</div>

我需要的是能夠左右移動用戶圖像，但將蓋有蓋子的div會掩蓋我的另外一個。有沒有辦法呢？

此外，我需要知道是否有可能讓div＃只包含png文件，但其中的圖像大小不像id＃main那麼大，所以其餘的覆蓋div將是背景顏色白色 - 圖像區域沒有獲得白色？

更新： 我想有一個層（DIV＃蓋），將覆蓋另一層（DIV＃圖像）。在第一個我會有一個圓，它的內部是透明的，外部是白色的，所以我將能夠看到覆蓋層內的底層img 我將jQuery拖到第二層，但它不會工作因爲頂層可以阻止它被鼠標拖拽

我的問題是 - 底層是否可以在頂層覆蓋層時被拖動？

來源

2011-08-19 Y.G.J

很難理解，請創建一個jsfiddle演示請 – Ibu

請你試試更明確清晰嗎？ –

你想用這個標記來完成什麼？如在，這將用於什麼？我想我會得到你想要做的，但我認爲這不會起作用... –

很難回答一個人無法理解的問題。

如何使圖像/容器可拖動：http://jsfiddle.net/cNtfM/

使用jQuery/jQuery的UI在我眼裏最簡單的方法。

您的CoverImage將會高於其他圖像，因此您將其寫入主圖像之前的頁面。 [從上到下]

我知道這是否回答你的問題。

來源

2011-08-19 07:29:58

像Kashiv提到的那樣，您可以使用z-index來正確設置項目的圖層級別。 –

讓我非常接近解決方案 –

如果要覆蓋另一個DIV一個div，使用Z-index屬性：

#cover{position:absolute;z-index:101;} 
#image{position:absolute;z-index:100;}

我不能回答你的第二個問題，因爲我不明白。你能更精確地解釋它嗎？

編輯：在您編輯之後我明白您的意思：您想要移動某種裁剪框架下的圖像。我認爲它比使用2 div和CSS更復雜...

來源

2011-08-19 07:23:14 akashivskyy

如果你想拖動你的div，使用jQuery（如@Marc Uberstein提到的） – akashivskyy

，但它可能在所有？ –

當然是！ – akashivskyy

2格相互覆蓋

回答

相關問題