1

これは、このための典型的な css レイアウトです。

.rel {
   background: brown;
   position: relative;
   width: 100px;
   height: 100px;
   top: 100%;
   display: inline-block;
}

このフィドルを作成して、相対と絶対が a で何をするかを示しましたtop: 100%;。

同じフィドルで、2 番目の赤い div をクリックし、100% 下に配置されているかのように動作することを確認します。

これは奇妙ですか、それとも何ですか？アニメーション時の div はtop: 100%;考慮されていますが、通常の状況では何もしません。

編集

加えて、

html, body {
   height: 100%;
}

を使用できるようにしますtop: 100%;が、要素自体がそうでない場合に、なぜ.animate();トップを考慮するのですか?

4

2 に答える 2

2

あなたのインスタンスでは、ウィンドウの高さに対して、作業したい場合は/heightに 100% が必要です。bodyhtmltop

html, body { height:100%; } （例）

現在の例では、親要素 にはbody、それを含む子に基づいて定義された次元があります。子要素の高さはであるため、その中に存在する唯一の要素であるため、その子要素の高さも100pxであることを意味します。したがって、これらの要素が親のサイズを決定するため、含まれている要素にはまったく影響しません。body100pxtop:100%

が機能するためtop:100%には、子要素に基づいて展開されるのではなく、親要素の高さを直接定義する必要があります。それは上からの絶対値であるため、 のようなものtop:222px が機能します。ただし、%ベース値を使用するにはディメンションが必要100%です。0 も 0 です。親bodyをheight:500px (example)に設定すると、機能します。ただし、ウィンドウの高さに基づいてbody, html { height:100% }必要な場合は、必要になります。

アニメーション自体が jQuery を使用して機能する理由についてはpx、DOM 内の要素の移動にパーセンテージ ベースではなくベース値が使用されているためです。したがって、これはプレーン CSS でも機能します (上記)。アニメーション中にコードを見ると、これが示されます。これがスクリーンショットです。ご覧のとおりpx、要素を移動するために値が使用されます。唯一の違いは、jQuery がウィンドウの高さを計算することです。それ以外に、jQuery は純粋な CSS では達成できない特別なことをしていません。値が使用されていると仮定すると、CSS アニメーションを使用してまったく同じことを行うことができますpx... しかし、親要素の高さを設定することがわかっているため、代わりにパーセンテージベースの値を使用できるため、これはもはや問題ではありません。

于 2013-11-13T17:43:22.107 に答える
0

これを試して：

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}
于 2013-11-13T16:31:34.573 に答える