固定 div は単にページ全体から取り出され、クライアント ウィンドウとの関係が固定されていると言われています。この投稿の一番上の回答を読むまでは簡単だと思っていました。その場合、固定 div とウィンドウの境界線の間に強い関係は見られません。
固定 div で相対位置を設定するという内なる闇の魔法を説明できる人はいますか?
質問する
105 次
1 に答える
2
ここには 2 つの個別の質問があります。
- どのように
position: fixed;動作します。 - 絶対位置と固定位置のアイテムが配置される場所に、上/左/下/右の座標を書きませんでした。
あなたが投稿で書いていることposition: fixed;は基本的に正しいです — 固定されたオブジェクトがページから取り出され、ウィンドウの境界線に貼り付けられます。また、左/右/上/下を使用して開始位置を指定すると、ウィンドウ オブジェクトからカウントされます。
position: fixed;しかし、座標を追加しても追加しなかった場合、または 1 つの次元の座標のみを追加した場合はどうなるでしょうか。
その場合、オブジェクトの開始位置は、ページのフローから削除される前の場所から計算されます。
いくつかの簡単な例を試してみましょうposition: absolute;(これに関しては、修正済みとほとんど同じように機能します)。
例position: static;:
`<div>First sentence. <mark>Second sentence.</mark> third sentence. </div>`
この例では、2 番目の文がページ フロー内にあるため、最初の文の後、3 番目の文の前に配置されます。
例position: absolute;:
<div>First sentence. <mark style="position: absolute;">Second sentence.</mark> third sentence.</div>
この例では、2 番目の文はページ フローから取得されていますが、座標は指定されていません。そのため、最初の文の後に配置されましたが (フローから if を削除する前の場所)、3 番目の文は 2 番目の下になりました。if はフローではなくなったためです。
との例position: absolute;; 左: 0;`:
<div>First sentence. <mark style="position: absolute; left: 0;">Second sentence.</mark> third sentence.</div>
そして最後に、2 番目のセンテンスに出発点を与えますleft: 0;。これで、スペースを占有しなかっただけでなく、コンテナの左側のパーティに移動しました。top(ただし、right座標を追加していないため、以前と同じ高さのままです)。
position: fixed;ほとんど同じように動作します。したがって、元の投稿では、著者は上の座標を修正しただけで、左右を修正しませんでした。このオブジェクトは、ページのフロー内の元の場所に水平に配置されていたためです。
于 2013-02-16T22:06:20.873 に答える