8

だから私はこの質問をしました：固定位置とマージントップのグーグルクロームの問題は、最終的に私にそれを認識させましたが、同じものではありませんtop。margin-top何年もの間、どうしてそれを逃したのかわかりません。

margin-topとにかく、との違いは何であるtopかを正確に考えさせられました。それが、この質問を見つけた方法です：CSS：TopvsMargin-top。

私はすでに何をしたか知っていましmargin-topた。しかし、「うーん、この要素はDOMフローに含まれていないので、正確に何がmargin-topそれを遠ざけているのか」と考えるためにそれを推定したことはありませんでした。

私が尋ねた質問からmargin-top、位置のある要素に適用すると、非常に予期しない動作をすることがわかりましたfixed。そして、少なくともChromeでは、これはいくつかのクレイジーなルールにつながる可能性があります（のようなmargin-top: -273%;）。

だから私の質問は次のとおりです：ブラウザはDOMフローにない要素（つまり、またはの値を持つ要素）にルールをどのように適用しますか？また、それらが適用されてレンダリングされる方法は、上記のようなルールにつながり、実際に要素をレンダリングしますビューポート内？marginpositionfixedabsolute

4

1 に答える 1

3

このtopプロパティは、ボックスモデルのレンダリングを開始する要素の上部からの距離を決定するだけです。の場合position: fixed、それはウィンドウそのものです。の場合position: absolute、非静的位置を持つ次の親要素です。

一方、マージンはボックスモデル自体の一部です。ボックスの上部にマージンを追加すると、ボックスの上にある空きスペースが増えます。

position: fixedボックスの次のレイヤーを検討してください。

               top:10px
            margin-top:10px
------------border-top:1px------------
           padding-top:10px
  content

マージン、ボーダー、パディングはすべてボックス モデルの一部です。その要素全体、つまり「ピース」は、配置時に 1 つの大きな正方形にすぎません。したがって、ボックスの上部に 10 ピクセルのマージンがあり、要素を上部から 10 ピクセルの位置に配置すると、ウィンドウの上部と表示されているボックスの開始位置との間に 20 ピクセルのマージンがあるように見えます。

また、非常に単純な例を jsFiddle で作成しました。

グラフィックが好きなら、この例を見てください。赤いボックスにはposition: fixed:

視覚的な例

最初のセクションでわかるように、要素を設定するだけposition: fixedでは実際にはどこにも移動しません。ドキュメントの流れから削除するだけです。

セクション セクションでは、ボックスの上部に 10 ピクセルの余白があるためmargin-top: 10px、要素を 10 ピクセル下に移動します。しかし、実際にはどこにも移動していません。ボックスのモデルが変更されたため、ボックスの高さが高くなりました。

3 番目のセクションでは、top: 10px 実際に を使用してボックスをウィンドウ コンテナーの上部から 10px に移動します。最初のセクションとまったく同じボックス モデルです。

セクション 4 は、上の 2 番目のセクションと似ていますが、負のマージンによって 10 ピクセル上に移動します。箱のモデルはまだ背が高く、箱はまだ動いていません。

要素に絶対位置を設定すると、他の位置プロパティを設定しなければ、要素はまったく移動しません。したがって、top、right、bottom、またはleftプロパティ セットがないと、要素はフローの一部としてレンダリングされた場合の位置にとどまり、フローから削除されます。したがって、正または負のマージンを追加すると、その位置から上下に移動するように見えます。実際には、要素のボックス モデルを変更しているだけです。

また、上下のマージン (さらにはパディング) にパーセンテージを使用することは、高さとは何の関係もないことも認識する必要があります。実際には幅を使用して、どれだけのマージンがあるかを把握します。その値を使用可能な高さではなく、使用可能な幅の 10% にすると言いmargin-top: 10%ます。負にすると、その値が無効になります。これについて言及したのは、 のパーセンテージを使用していた場所にリンクした最初の質問に関連しているためmargin-topです。

これがあなたが探していたものをカバーしてくれることを願っています。あなたが何について混乱しているのか正確に言えなかったので、できる限り説明しました。

于 2013-02-14T22:45:40.957 に答える