切换显示：没有div在另一个div前面？

Question

我想让一个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; 
} 

我应该有bodybag类有一个z-索引和一个位置：相对？因为即使我不这样做（在这一点上）。

反正我这个剧本写的是在做什么我想它做的事：

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

所有我接下来要发生的是，作为textmask和backgroundmask淡入/变化，他们应该并做，是为了randomarticle_enlarge div显示出来。

我试过使用.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做什么，但我创建了一个例子，也许这就是你想要什么：

LIVE DEMO

因此，有两个divs。第二个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; 
} 

的jQuery：

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