如何讓div出現部分覆蓋在另一個正方形div上

我想從頭開始編碼，這樣當一個按鈕被點擊時，它會使選項div出現在現有div的頂部而不會取代它的原始位置。此圖說明了這一概念：如何讓div出現部分覆蓋在另一個正方形div上

http://i.stack.imgur.com/lxL4r.jpg

使得JavaScript的下面在點擊按鈕

xmlObj.open ('GET', '/ajax?action=editbox', true); 
xmlObj.send ('');

執行我已經把一個的「onClick」命令按鈕予省略其餘代碼之前，這是標準的東西。

這是我現在完全卡住的地方。我想現在有一個名爲'editbox.php'的php文件中的代碼，它告訴網頁使圖片中的選項div出現在orignal div的頂部（而不會取代原始div的位置）。

我會很感激任何提示或指導。

來源

2011-05-25 james

要澄清的是，定位給你麻煩的div或PHP腳本發送ajax調用的響應的CSS？ – Jrod 2011-05-25 15:33:14

嗨Jrod。這兩個部分都是我不知道該怎麼做的。下面的RwL好心地寫出了我想如何做CSS部分，現在我正在檢查它。謝謝。 – james 2011-05-25 15:45:30

這看起來更像是一個HTML/CSS問題;沒有明確的理由（至少，不是從問題的措詞）使用PHP來實現這一點。您的選項div可能會在頁面第一次加載時出現在DOM中，但其CSS display設置爲none。給按鈕和父div position: relative然後樣式按鈕和選項div絕對定位到父的右上角。確保按鈕和選項div是該父框的最後一個子項，並且它們按順序排列，因此z-index自然會按照您希望的方式出現。在該按鈕的onclick中，將選項div設置爲display: block。

來源

2011-05-25 15:30:28 RwwL

儘管如此，如果我單擊按鈕並顯示選項div，將再次單擊它隱藏選項div？ – james 2011-05-25 15:56:50

使用我描述的方法，按鈕將被選項div覆蓋 - 所以我希望你會添加一個關閉按鈕的選項，或保存按鈕，除了保存選項將隱藏div，再次顯示按鈕。如果您希望按鈕始終保持最佳狀態，則可以將原始標記中按鈕的源順序和選項div顛倒過來。然後，你可以修改按鈕上的clickhandler來簡單地「如果選項div是可見的，隱藏它，如果沒有，顯示它」的邏輯。 – RwwL 2011-05-25 16:19:31

你好，我遵循你的指導，並把一個按鈕，打開和關閉工作正常的股利。唯一的問題是按鈕移動後，我點擊它來打開div。我不明白你的意思是顛倒按鈕的源順序和標記中的選項div來解決這個問題，請你解釋一下。 – james 2011-05-25 17:44:40

如何讓div出現部分覆蓋在另一個正方形div上

回答

相關問題