DIVはjQueryで下に移動しません

Question

私はお互いの下に2つの大きなDIVを持っています。これらのDIVには2つの小さいものがあります。最初のものは常に表示され、2番目のものはjQueryで最初のものをクリックするとslideDownする必要があります。まあ、それは滑り落ちますが、それ自体の下にある次の大きなDIVは動かされません。それはちょっと、このようなコードで

：それらの「小さな」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 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上記1つのchはこのDIVの下にあります。その下のDIVも滑り落ちるはずです。

Answer 1

すべての位置を「相対」に変更して、動作するかどうかを確認してください。

Answer 2

ここでの問題は、宣言された高さがdiv.commentsにないことです。それは絶対的に配置されているため、あなたが特定の高さが宣言されていない限り、自動的にレイアウトの高さを占めることはありません。 border: 1px solid redを.post-bottomに追加し、別の色の境界線を.commentsに追加して、スペースがどれだけ占有されているかを確認してください（これらの要素を調べるためにFirebugを使用する方が良いでしょう）。常に絶対位置の要素の真ある

ことの一つは、彼らが親要素に高さや幅を追加することはありませんということです。

「.post-stats」divを絶対的に配置し、.comments divを要素の可変数に適応する必要がある要素として相対的に配置することができます高さ）。

top:またはbottom:を使用すると、要素の高さや、配置の増加/減少を考慮しない場合に、垂直方向のスペース内で上下にどのように押し合わせるか、混乱するレイアウト上の問題が生じることにも注意してください余分な（または場合に応じて負の）高さまたは余​​分なマージン、またはそれを親要素のために埋め込むかのいずれかです。