位置が絶対配置された要素上の垂直スペース

Question

position:absoluteとの要素を動的高さで作成するには、CSSのみを使用して垂直スペースを使用しますか？私が使うことができるコンテナとディスプレイを備えたトリックはありますか？

Answer 1

絶対的な配置とは、定義上、要素がもはやスペースを占有していないことを意味します。だから、CSSを介してのみこれを行う方法はありません。

もちろん、これを達成するためにjQuery（またはプレーン・ジャバスクリプト）を使用できます。私がそれをする方法は、各垂直要素の隣にspace要素があります。スペース要素と絶対的に配置された垂直要素の両方を相対的に配置されたdivに囲みます。ページの読み込み時に、スペース要素のheightを垂直要素の高さと一致するように変更します。

Answer 2

position: absoluteは、フロー内でスペースを占有しないことを意味します。ただし、マージンを使用してアニメートする必要はありません。floatを使用して要素がどのようなスペースを占めるようにして、各要素をposition:relativeにすることができます。

div.animate-me { 
    width: 300px; 
    margin: 20px; 
    float: left; 
    left: -1000px; // Make them start offscreen 
    position: relative; 
    border: 1px solid red; 
    visibility: hidden 
}​ 

$('div').css().animate({ 
    left: 0 
}); 

SAMPLEhttp://jsfiddle.net/qxzzX/1/