我想要一个切换div elemenet，用z-index覆盖底层内容。我如何才能做到这一点？
我想要一个切换div elemenet，用z-index覆盖底层内容。我如何才能做到这一点？
提问于 2009-04-14 20:44:48
我在一个框中有一个简短的介绍文本，如果用户想要阅读futrher，他可以切换一个隐藏的div元素来显示其余内容。在这个介绍框下面，我还有一些其他的元素，我总是想把它们放在那个位置。我希望切换的文本“显示”固定的内容，并且我不希望当切换的div打开时它向下推。我已经尝试了各种z索引值，绝对和相对位置，但都没有用。有没有一个干净的基于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
Stack Overflow用户
发布于 2009-04-14 21:00:46
我以前做过的事情：
将您的内容分成两个跨度。一个跨度显示，另一个跨度隐藏。当用户想要查看其余内容时，使用文本的其余部分显示另一个跨度。
我使用JQuery toggle()命令来简化这项操作。
Stack Overflow用户
发布于 2009-05-09 16:12:44
我看不出移动z索引比通过改变div上的display属性来隐藏和显示内容更好/更有效。是不是有什么原因让你想要所有的内容都在页面上呢？
Stack Overflow用户
发布于 2009-04-14 21:07:19
我猜你只是在用IE进行测试。Firefox没有这个问题。
这是IE中的一个已知错误，即z索引错误
有一个使用javascript http://mahzeh.org/?p=23的“通用”解决方案。
但最好的方法是重新排列元素，以便您的可扩展元素位于下面框的某个位置。尝试将其插入到您要在HTML中覆盖的方框之后，然后使用绝对定位将其直观地定位在上面。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/749314
复制相关文章
相似问题
腾讯云开发者
