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-index和一个位置：relative？因为即使我不这样做（在这一点上）。

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

$(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

所以有两个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;
}

jQuery的：

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

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

3 个答案: