在其父后面隐藏div？ [英] Hiding div behind its parent?

问题描述

 < div class = content-wrapper> 
< div class = popup> 
< div class = close> 
< / div> 
< / div> 
< / div> 
  

.content-wrapper相对放置并包含所有页面内容（不仅仅是弹出窗口）。 / p>

.popup绝对位置。

.close也绝对位置。

当光标进入弹出窗口时，我有一些JavaScript可移动关闭（因此，侧面有一个漂亮的关闭栏）。我发现做到这一点的最好方法就是使用jQuery动画。即使.stop（）无法解决，隐藏/显示也会产生结结巴巴的影响。我的问题是试图将.close隐藏在.popup之后。无论我为两个div.close设置什么z-index都不会位于.popup之后。

是否有可能在其父级后面的另一个绝对位置div中有一个绝对位置的div，如果是这样，怎么办？

解决方案

是的，请使用z-index： http://jsfiddle.net / tGd4Q /

HTML：

 < div class = content-wrapper> 
< div class = popup> 
< div class = close> 
< / div> 
< / div> 
< / div> 
  

CSS：

  .popup，.close {位置：绝对;高度：200px；宽度：200像素； } 
 .popup {背景：＃f00; } 
 .close {背景：＃ff0;顶部：25px；左：25px； z索引：-1； } 
  

这不适用于IE7标准。我建议使用jQuery（或您选择的其他框架）隐藏div：

  $（'。popup .close'） 。隐藏（）; 
  

<div class="content-wrapper">
    <div class="popup">
        <div class="close">
        </div>
    </div>
</div>

.content-wrapper is relatively positioned and contains all the page content (not just the popup).

.popup is absolutely positioned.

.close is also absolutely positioned.

I have some javascript to move close when the cursor enters popup (so I have a nice close bar appear out the side). The best way I have found to do this is just to move using jQuery animate. Hiding/showing creates a stuttering affect even .stop() wasn't able to solve. My problem is in trying to hide .close behind .popup. No matter what z-index I set for the two divs .close will not sit behind .popup.

Is it possible to have an absolutely positioned div inside another absolutely positioned div sit behind its parent, and if so how?

解决方案

Yep, use z-index: http://jsfiddle.net/tGd4Q/

HTML:

<div class="content-wrapper">
    <div class="popup">
        <div class="close">
        </div>
    </div>
</div>​

CSS:

.popup, .close { position: absolute; height: 200px; width: 200px; }
.popup { background: #f00; }
.close { background: #ff0; top: 25px; left: 25px; z-index: -1; }​

This won't work with IE7 standards though. I suggest using jQuery(or other framework of your choosing) to hide the div:

$('.popup .close').hide();

这篇关于在其父后面隐藏div？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！