我想要一个切换div elemenet，用z-index重叠底层内容。我怎样才能做到这一点？

I have a short intro text inside a box, if the user wants to read futrher he can toggle a hidden div element that shows the rest of the content. Under this intro box I have some other element, which I always want to stay in that position. I want the toggled text to 'show above' the fixed content, and I don't want it to push downwards when the toggled div is opened. I've experimented with various z-index values, absolute and relative positioning, to no avail. Is there a clean CSS based solution to this? Please help! Here's a demo of what I'm trying to do:

我在一个框内有一个简短的介绍文本,如果用户想要阅读更多,他可以切换显示其余内容的隐藏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>

4 个解决方案

#1

Something I have done in the past:

我过去做过的事情:

Separate your content into two spans. One span is displayed and the other hidden. When the user want to see the rest of the content, show the other span with the rest of the text.

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

I use the JQuery toggle() command to make it easier to do.

我使用JQuery toggle()命令使其更容易。

#2

I'm not seeing how moving the z-index around is better/more efficient than hiding and showing the content by altering the display attribute on the divs. Is there some reason you want all the content on the page at all times?

我没有看到如何移动z-index比通过改变div上的display属性来隐藏和显示内容更好/更有效。您是否有理由始终想要页面上的所有内容?

#3

I guess you are testing with IE only. Firefox does not have this problem.

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

This is a known bug in IE, the z-index bug

这是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?

z-index是强制元素定位在另一个元素之上的唯一方法,如果没有其他方法吗?

There is a "general" solution using javascript http://mahzeh.org/?p=23

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

But the best way is to rearrange elements so your expandable element gets on a position over the box below. Try to insert it after the box you want to cover in your HTML and then position above it visually using absolute positioning.

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

#4

Try:

#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>

On event 'click for more' set #more to display: block;

在事件'click for more'上设置#more以显示:block;

The z-index is implied in this case as #more is before #under in the document tree, and hence has a higher z-index

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

#1