jquery - DIV 不会随着 jQuery 向下移动

Question

我在彼此下面有两个大 DIV。在这些 DIV 中有两个较小的 DIV。第一个始终可见，第二个应该在单击第一个时使用 jQuery 滑动。好吧，它确实会向下滑动，但不会移动位于其下方的下一个大 DIV。

在代码中它看起来有点像这样:

<div class="big">
 <div class="small_up">
 </div>
 <div class="small_down">
 </div>
</div>

<div class="big">
 <div class="small_up">
 </div>
 <div class="small_down">
 </div>

在那些“小”的 DIV 中有更多的绝对定位的 DIV。

如果您想查看完整的真实代码:

<div class="post post-texts" status="closed">
    <div class="post-top">
        <div class="avatar"><img src="img/avatar.png"></div>
        <a href="http://parislemon.com/post/15604811641/why-i-hate-android" class="quote" target="empty">
            <div class="quote">
                »I hate Android for the same reason that Severus Snape hates Harry Potter - the very sight reminds me of something so beautiful, that was taken. Except it’s worse. It’s as if Harry Potter has grown up to become Voldemort. «
            </div>
        </a>
        <div class="buttons">
            <img class="recite" src="img/recite.png" />
            <img class="like" src="img/like.png" />
            <img class="facebook" src="img/facebook.png" />
            <img class="twitter" src="img/twitter.png" />
        </div>
    </div>
    <div class="post-bottom">
            <div class="post-stats" >
                <div class="recite-counter">15</div>
                <p class="recite-counter-text">Recites</p>
                <div class="like-counter">36</div>
                <p class="like-counter-text">Likes</p>
            </div>
            <div class="comments comments-texts">
                <div class="single-comment">
                    <div class="avatar-comment"><img src="img/avatar-comment.png" /></div>
                    <div class="comment-content">
                    Patrick -
                    <span class="comment">Lorem ipsum dolor sit amet, consetetur  At vero eos et accusam et just At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren.o duo dolores et ea rebum. Stet clita kasd gubergren. sadipscing elitr, sed diam nonumy eirmod tempor.  At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren.</span>
                    </div>
                    <div class="comment-time">
                        about 10 minutes ago
                    </div>
                </div>
                <div class="single-comment">
                    <div class="avatar-comment"><img src="img/avatar-comment.png" /></div>
                    <div class="comment-content">
                    Patrick -
                    <span class="comment">stfu</span>
                    </div>
                    <div class="comment-time">
                        about 5 minutes ago
                    </div>
                </div>      
            <div>
        </div>
    </div>
</div>
</div>

jQuery:

$('div.post').click(function() {
    $('div.post-bottom').slideDown(500);
});

CSS:

div.timeline {
    position: absolute;
    top: 420px;
    left: 50%;
    margin-left: -425px;
    width: 850px;
}
div.post {
    position: relative;
    height: 170px;
    width: 850px;
    margin-bottom: 10px;
}
div.post-texts {
    background-color: #196074;
}
div.avatar {
    position: absolute;
    left: 20px;
    top: 20px;
    width: 110px;
    height: 110px;
}
div.quote {
    position: absolute;
    left: 150px;
    top: 17px;
    width: 650px;
    font-family: DroidSans;
    font-size: 16px;
    color: #fff;
    line-height: 23px;
}
div.buttons {
    position: absolute;
    top: 135px;
    left: 20px;
    height: 20px;
    width: 110px;
}
div.post-bottom {
    position: relative;
    top: 170px;
    width: 853px;
    display: none;
}
div.post-stats {
    position: relative;
    width: 426px;
    background-color: #196074;
    padding: 50px 0px 50px 20px;
}
div.recite-counter, div.like-counter {
    height: 25px;
    width: 35px;
    border-radius: 20px;
    text-align: center;
    font-family: DroidSansBold;
    font-size: 14px;
    color: #196074;
    padding-top: 9px;
    background-color: #fff;
}
div.like-counter {
    margin-top: 20px;
}


div.comments {
    position: absolute;
    top: 0px;
    left: 426px;
    width: 427px;
    /* border-left: 3px solid #fff; */
}
div.comments-texts {
    background-color: #196074;
}
div.single-comment {
    width: 400px;
    min-height: 55px;
    margin-bottom: 1px;
}
div.avatar-comment {
    position: absolute;
    margin: 10px;
}
div.comment-content {
    font-family: DroidSansBold;
    font-size: 12px;;
    padding: 9px 5px 10px 53px;
    line-height: 15px;
    color: #fff;
}
div.comment-time {
    font-family: DroidSans;
    font-size: 12px;
    color: #fff;
    padding: 0px 0px 10px 53px;
}

很快:上面的 DIV 滑过了这个 DIV 下面的那个。它下面的 DIV 也应该向下滑动。

Answer 1

尝试将所有位置更改为“相对”，看看是否有效。