我想要一個切換div elemenet，以將底層內容與z-index重疊。我該如何實現？

Question

我在方框內有一個簡短的介紹性文字，如果用戶想進一步閱讀，他可以切換一個隱藏的div元素，以顯示其余內容。 在此介紹框下，我還有一些其他元素，我一直希望保持在該位置。 我希望切換后的文本“顯示在固定內容的上方”，並且我不希望在切換后的div打開時將其向下推。 我嘗試了各種z-index值，絕對和相對位置，但無濟於事。 是否有基於CSS的干凈解決方案？ 請幫忙！ 這是我正在嘗試做的演示：

> <!DOCTYPE html PUBLIC "-//W3C//DTD
> XHTML 1.0 Transitional//EN"
> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
> <html
> xmlns="http://www.w3.org/1999/xhtml"
> xml:lang="en"> <head>     <style
> type="text/css">      .container{width:
> 400px;
>                   height: 500px;
>                   border: 1px dashed #999; 
>                   }       div.container{padding:0; margin:0}                  #morecontent{
>               z-index: 100    
>               }       #morecontent,.introcontent{background: #DFFAFF;}                div#fixedcontent{background:
> #FFDFDF;
>                       z-index: -1;
>                       position: absolute; 
>                       width: 400px
>                       }           </style> <title>Toggle overlap - test</title> </head> <body>
>   <div class="container">         <div id="">
>       <script type="text/javascript">
>                               function toggle(obj){
>                               var el=document.getElementById('morecontent');
>                                   if (el.style.display !='none'){
>                                           el.style.display='none';
>                                       }
>                                       else {el.style.display='';
>                                               }
>                               }
>                                   </script>
>               <p class="introcontent">Lorem ipsum dolor sit amet, consectetur
> adipiscing elit. Aenean in pede congue
> ipsum sollicitudin pellentesque. Nunc
> t tortor dolor, sagittis nec, placerat
> vel, commodo sed, nunc. Vivamus
> bibendum molestie orci. Duis nec leo
> at libero fermentum molestie. Nam eu
> risus.<br /> 
>               There's more if you press toggle...
>               
>                                           </p>
>                       <a href="JavaScript: toggle(this)">Toggle</a>                   
>                   <div id="morecontent" style="display:none;">
>                       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean in
> pede congue ipsum sollicitudin
> pellentesque. Nunc t  tortor dolor,
> sagittis nec, placerat vel, commodo
> sed, nunc. Vivamus bibendum molestie
> orci. Duis nec leo at libero fermentum
> molestie. Nam eu risus.
>                                           </p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
> Aenean in pede congue ipsum
> sollicitudin pellentesque. Nunc
> t tortor dolor, sagittis nec, placerat
> vel, commodo sed, nunc. Vivamus
> bibendum molestie orci. Duis nec leo
> at libero fermentum molestie. Nam eu
> risus.
>                                           </p>
>                       </div>
>                       
>                       <div id="fixedcontent">
>                       <p>This should stay 'under' the toggled content!</p>
>                           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean in
> pede congue ipsum sollicitudin
> pellentesque. Nunc t  tortor dolor,
> sagittis nec, placerat vel, commodo
> sed, nunc. Vivamus bibendum molestie
> orci. Duis nec leo at libero fermentum
> molestie. Nam eu risus.
>                                           </p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
> Aenean in pede congue ipsum
> sollicitudin pellentesque. Nunc
> t tortor dolor, sagittis nec, placerat
> vel, commodo sed, nunc. Vivamus
> bibendum molestie orci. Duis nec leo
> at libero fermentum molestie. Nam eu
> risus.
>                                           </p>
>                           </div>              </div>          </div>      </body> </html>

Answer 1

我過去做過的事情：

將您的內容分成兩個部分。 顯示一個跨度，另一個跨度隱藏。 當用戶想要查看其余內容時，請顯示其他跨度以及其他文本。

我使用JQuery toggle（）命令使其更容易實現。

Answer 2

我沒有看到移動z-index比通過更改div上的display屬性顯示/隱藏內容更好/更有效。 您是否出於某些原因一直想要頁面上的所有內容？

Answer 3

我猜您只在使用IE進行測試。 Firefox沒有此問題。

這是IE中的已知錯誤，即z-index錯誤

如果沒有其他方法，z-index是否是迫使元素位於另一個元素之上的唯一方法？

有一個使用javascript http://mahzeh.org/?p=23的“通用”解決方案

但是最好的方法是重新排列元素，以使可擴展元素位於下面的框上方的位置。 嘗試將其插入要覆蓋HTML的框之后，然后使用絕對定位在視覺上將其定位。

Answer 4

嘗試：

#container { position: relative; }
#more { position: absolute; display: none; background-color: White;}

<div id="container">
    Lorum <a href="#">click for more</a>
    <div id="more">
       Lorum
    </div>
    <div id="under">
        Underneath text
    </div>
</div>

在事件“ click for more ”上，將#more設置為display: block;

在這種情況下，由於在文檔樹中#more在#under之前#under隱含z-index，因此z-index較高

我想要一個切換div elemenet，以將底層內容與z-index重疊。我該如何實現？

問題描述

4 個解決方案

解決方案1
1 2009-04-14 21:00:46

解決方案2
1 2009-05-09 16:12:43

解決方案3
0 2009-04-14 21:07:19

解決方案4
0 2009-05-09 16:07:00

我想要一個切換div elemenet，以將底層內容與z-index重疊。 我該如何實現？

問題描述

4 個解決方案

解決方案1 1 2009-04-14 21:00:46

解決方案2 1 2009-05-09 16:12:43

解決方案3 0 2009-04-14 21:07:19

解決方案4 0 2009-05-09 16:07:00

我想要一個切換div elemenet，以將底層內容與z-index重疊。我該如何實現？

解決方案1
1 2009-04-14 21:00:46

解決方案2
1 2009-05-09 16:12:43

解決方案3
0 2009-04-14 21:07:19

解決方案4
0 2009-05-09 16:07:00