web-dev-qa-db-ja.com

位置のある要素の垂直方向のスペース：絶対

position:absoluteおよび動的高さの要素をcssのみを使用して垂直方向のスペースを占めるようにするにはどうすればよいですか？使用できるコンテナとディスプレイのトリックはありますか？

htmlcsspositioning
13
Yisela

残念ながら、絶対配置を使用すると、定義上、要素がスペースを占有しなくなります。したがって、いいえ、cssを介してのみこれを行う方法はありません。

もちろん、jQuery（またはプレーンJavaScript）を使用してこれを実現できます。私のやり方は、各垂直要素の横にspace要素を配置することです。スペース要素と絶対位置の垂直要素の両方を、比較的配置されたdivで囲みます。ページの読み込み時に、スペース要素の height を変更して、垂直要素の高さに一致させます。

9
Jeff Gortmaker

position: absoluteは、フロー内のスペースを占有しないことを意味します。ただし、marginを使用してアニメーション化する必要はありません。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
});

[〜＃〜] sample [〜＃〜]http://jsfiddle.net/qxzzX/ 1 /

3
Juan Mendes

これはすべての状況に当てはまるわけではありませんが、position: absolute要素のアスペクト比が固定されている場合（たとえば、height: autoを使用して画像や動画のサイズを変更する場合）、 padding-bottomトリック 同じアスペクト比のスペーサー要素を指定して、absolute要素と連動してサイズを変更します。

.spacer {
  height: 0;
  padding-bottom: 125%; /* for a 1.25 height/width ratio */
}

リンクを読み取ることはできますが、パーセンテージ付きのpadding-bottomは要素の幅のパーセンテージとして解釈されるため、これは機能します。

次に、スペーサーをposition: absolute要素を正確に覆うか下に置くように配置し、absolute要素がabsoluteでなかった場合に必要だったスペースを占めるように配置するのは、特定のレイアウト次第です。

1
user1454265