我想要一个切换 div 元素，将底层内容与 z-index 重叠。我怎样才能做到这一点？答案

【问题标题】：I want a toggling div elemenet, to overlap the underlaying content with z-index. How can I achieve this?我想要一个切换 div 元素，将底层内容与 z-index 重叠。我怎样才能做到这一点？
【发布时间】：2009-05-10 00:12:43
【问题描述】：

我在一个框中有一个简短的介绍文本，如果用户想进一步阅读，他可以切换一个隐藏的 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>

【问题讨论】：

如果您希望我们查看，请清理并格式化您的源代码。
是的 - 可能是一个精简版本，只包含您遇到问题的元素

标签： javascript css toggle z-index

【解决方案1】：

我过去做过的事情：

将您的内容分成两个跨度。显示一个跨度，另一个隐藏。当用户想要查看其余内容时，将其他 span 与其余文本一起显示。

我使用 JQuery toggle() 命令使它更容易操作。

【讨论】：

【解决方案2】：

我没有看到移动 z-index 比通过更改 div 上的 display 属性隐藏和显示内容更好/更有效。您是否出于某种原因始终想要页面上的所有内容？

【讨论】：

【解决方案3】：

我猜你只用 IE 进行测试。 Firefox 没有这个问题。

这是 IE 中的一个已知错误，即 z-index 错误

Is z-index the only way to force an element to be positioned over top of another, if not what other methods are there?

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

但最好的方法是重新排列元素，使您的可扩展元素位于下方框上方的位置。尝试将其插入 HTML 中要覆盖的框之后，然后使用绝对定位直观地定位在其上方。

【讨论】：

相反，我只用 FireFox 测试过！但是你答案的第二部分解决了这个问题。我只需要将固定内容放在标记中的切换内容之前，将其绝对定位，就可以了！非常感谢。 :) PS.：我是该网站的新手，所以也许我的问题不是最好的。

【解决方案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;

z-index 在这种情况下是隐含的，因为 #more 在文档树中位于 #under 之前，因此具有更高的 z-index

【讨论】：