如何分層這些div標籤？

我寫了一些JavaScript，首先加載到div1a，div2a，div3a和div4a的圖像。然後順序加載「b」divs並淡出「a」div。如何分層這些div標籤？

我想要的是「b」div在「a」div淡出之前淡入「a」div頂部。

JavaScript工作正常，除了「b」div加載低於而不是「a」divs之外的事實。

請記住，此表位於居中的「包裝器」區域內。所以，使用絕對定位似乎不起作用。

<table height="258" border="0" cellpadding="0" cellspacing="2"> 
    <tr> 
    <td width="244"> 
     <div id="div1a" style="position:relative; z-index:100;">HERE</div> 
     <div id="div1b" style="position: relative; top: 0; left: 0; z-index:101">THERE</div> 
    </td> 
    <td width="244"> 
     <div id="div2a" style="position:relative;"></div> 
     <div id="div2b" style="position:relative;"></div> 
    </td> 
    <td width="244"> 
     <div id="div3a" style="position:relative;"></div> 
     <div id="div3b" style="position:relative;"></div> 
    </td> 
    <td width="244"> 
     <div id="div4a" style="position:relative;"></div> 
     <div id="div4b" style="position:relative;"></div> 
    </td> 
    </tr> 
</table>

任何幫助將不勝感激。

來源

2011-03-14 MarkHFLA

它的原因是你的位置都設置爲相對。你用什麼意思使用絕對定位似乎不工作？你有什麼嘗試。 – LostLin 2011-03-14 21:13:17

我已經嘗試在絕對位置定位「b」div。但是，這隻會讓他們出現在整個頁面的右上角。 – MarkHFLA 2011-03-14 21:42:41

嗯，也許使用position: relative父和position: absolute將工作：

<table height="258" border="0" cellpadding="0" cellspacing="2"> 
    <tr> 
    <td width="244" style="position:relative;"> 
     <div id="div1a" style="position:absolute; z-index:100;">HERE</div> 
     <div id="div1b" style="position:absolute; top: 0; left: 0; z-index:101">THERE</div> 
    </td> 
    <td width="244" style="position:relative;"> 
     <div id="div2a" style="position:absolute;"></div> 
     <div id="div2b" style="position:absolute;"></div> 
    </td> 
    <td width="244" style="position:relative;"> 
     <div id="div3a" style="position:absolute;"></div> 
     <div id="div3b" style="position:absolute;"></div> 
    </td> 
    <td width="244" style="position:relative;"> 
     <div id="div4a" style="position:absolute;"></div> 
     <div id="div4b" style="position:absolute;"></div> 
    </td> 
    </tr> 
</table>

來源

2011-03-14 21:12:50 Blender

posisiton：絕對會導致左上角顯示「b」div的整個頁面的角落。 – MarkHFLA 2011-03-14 21:40:04

攪拌機，我沒有看你的代碼。（對我很恥辱！）完美的作品。非常感謝。 – MarkHFLA 2011-03-14 22:03:47

然後，您可以將其標記爲答案，因爲其他具有相同問題的人會知道這解決了問題。 – Blender 2011-03-15 03:01:31

讓你的容器（這裏）位置：相對的。使兩邊的位置「位置：絕對;頂部：0;左邊：0;」。沒有z-index應該是必要的。

來源

2011-03-14 21:13:08 arantius

這是你的意思嗎？

HERE

THERE

這使得「B」的DIV在頁面的左上角顯示出來。 – MarkHFLA 2011-03-14 21:37:47

我知道這不是直接回答你的問題，但我強烈建議你看看http://jquery.malsup.com/cycle/來完成你正在做的事情。這聽起來像你可以很容易地獲得你正在尋找的互動。

無論哪種方式，最好的祝願！

來源

2011-03-14 21:14:18 Todd

這將是完美的，除了我的div也包含文本和文本和圖像都包含鏈接。 – MarkHFLA 2011-03-14 21:41:13

沒問題。您可以定位任何DOM元素，包括DIV。因此，您可以簡單地將每組圖像，文本和鏈接（按您的意願定位和設計）包裝到一個div中，然後定位該div集合。 – Todd 2011-03-14 22:04:13

如何分層這些div標籤？

回答

相關問題