切换显示:无，div 在另一个 div 前面

Question

当您单击某些内容时，我正在尝试使我在另一个div之上的div显示出来。

这是两个div的代码，没有每个div中的所有内容：

<div id="randomarticle_enlarge">
    <h1></h1>
    <h4></h4>
        <p></p>
        <p></p>
</div>
<div class="bodybag">
    <h1></h1>
    <h4></h4>
        <p></p>
        <p></p>
</div>

然后我为每个都有css，当然：

.bodybag {
width:960px;
}
#randomarticle_englarge {
height:750px;
width:960px;
position:absolute;
z-index:2;
margin-top:1px;
padding-left:20px;
padding-right:20px;
display: none;
}

我是否应该让尸袋类有一个 z 索引和一个位置：相对？因为即使我不这样做，它也在工作（在这一点上）。

无论如何，我写了这个脚本，它正在做我希望它做的事情：

$(document).ready(function() {
    $('.popular').click(function() {
    $('#textmask').fadeTo( 'fast', 0.1);
    $('#backgroundmask').css('background-color', 'white');
    });
});

接下来我想发生的是，当文本掩码和背景掩码淡入/改变它们应该和做时，randomarticle_enlargediv 就会出现。

我尝试使用.toggle和.toggleClass以及.slideToggle和.show，但没有任何效果。

Answer 1

绝对定位必须相对于容器。为了绝对定位某物，您需要指出它的绝对定位。类似的东西。

<div id="randomarticle_englargeContainer">
    <div id="randomarticle_englarge">
    </div>
    <div class="bodybag">
    </div>
</div>

#randomarticle_englargeContainer {
    position: relative;
}
.bodybag {
    position: absolute;
    left: 0;
    top: 0;
}

Answer 2

从上面复制所有内容时，我使用 $('#randomarticle_englarge').toggle(); 没有问题。检查浏览器的控制台是否有错误;你可能会在那里找到答案。

Answer 3

我不确定你想用div 做什么，但我为你创建了一个示例，也许这就是你想要的：

现场演示

所以有两个div。第二个div涵盖了第一个div。单击"按钮"隐藏第二个div，因此第一个div显示。再次单击"按钮"，出现第二个div并再次覆盖第一个div。

.HTML：

<div class="popular">Click me!</div>
<div class="container">
    <div id="randomarticle_enlarge">
        <h1>A</h1>
        <h4>B</h4>
        <p>C</p>
        <p>D</p>
    </div>
    <div class="bodybag">
        <h1>E</h1>
        <h4>F</h4>
        <p>G</p>
        <p>H</p>
    </div>
</div>

.CSS：

.container {
    position: relative;
}
.bodybag {
    width: 100px;
    height: 200px;
    background-color: red;
}
#randomarticle_enlarge {
    width: 100px;
    height: 200px;
    background-color: green;
    position: absolute;
    top: 0;
    left: 0;  
}
.hide {
    display: none;
}

j查询：

$(document).ready(function() {
    $('.popular').click(function() {
    $('#randomarticle_enlarge').toggleClass('hide');
    });
});