絶対位置、誰か説明してくれませんか

StackOverflow https://stackoverflow.com/questions/97683

  •  01-07-2019
  •  | 
  •  

質問

以下は説明が必要な CSS のスニペットです。

#section {
    width: 860px;
    background: url(/blah.png);
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -445px;
}

もちろん、それは画像の絶対位置です。

  1. topは上からパディングするようなものですよね？
  2. 左の50％は何をするの？
  3. 左マージンが -445px なのはなぜですか?

アップデート：幅は860pxです。実際の画像は 100x100 ですが、違いがあるでしょうか??

役に立ちましたか？

解決

  1. Top は、HTML 要素の上部からの距離、またはこれが絶対位置を持つ別の要素内にある場合は、その要素の上部からの距離です。

  2. &3.画像の幅にもよりますが、画像を水平方向に中央揃えにするためかもしれません（画像の幅が890pxの場合）。ただし、画像を水平方向に中央揃えにする方法は他にもあります。より一般的には、これは既知の高さのブロックを垂直方向の中央に配置するために使用されます (これは、既知の高さのものを垂直方向の中央に配置する最も簡単な方法です)。

    top: 50%
margin-top: -(height/2)px;

他のヒント

これはおそらく、要素をページの中央に配置するために行われたと考えられます ( 「デッドセンター」 技術）。

それはこのように動作します：要素の幅が 890 ピクセルであると仮定すると、次のように設定されます。 position:absolute そして left:50%, 、それを配置します 左端 の中に 中心 ブラウザの（まあ、他の要素の中心である可能性もあります） position:relative).

次に、負のマージンを使用して、 左側の端を移動します 左に等しい距離 要素の幅の半分, 、したがって中央に配置されます。

もちろん、これは正確に中央に配置されていない可能性があります (実際の要素の幅によって異なります。 width 貼り付けたコード内にあるため、確実なことは不可能ですが、要素がページの中心を基準にして配置されていることは確かです

topは右上からのパディングのようなものですか？

はい、ページの先頭です。

左の50％は何をするの？

コンテンツを画面の中央に移動します (100% は右端まで移動します)。

左マージンが -445px なのはなぜですか?

「左」で移動させた後、50%」の場合、左に 445 ピクセル戻ります。

上記のスニペットは、セクション ID を持つ要素 (div、span、image など) に関連しています。

この要素には、x 方向と y 方向の両方に繰り返される blah.png の背景画像があります。

親も絶対配置されている場合、要素の上端は親要素の上端から 0px (またはその他の単位) の位置に配置されます。親がウィンドウの場合、ブラウザ ウィンドウの上端に表示されます。

要素の左端は、親要素の左端の 50% の位置に配置されます。

要素は、その 50% ポイントから 445 ピクセル左に「移動」されます。

を読めば、知っておくべきことはすべてわかります。 CSSボックスモデル

位置が絶対値の場合、top は親からの垂直距離です (おそらく body タグなので、0 はブラウザ ウィンドウの上端になります)。左 50% は左端からの距離です。負のマージンを指定すると、左に 445 ピクセル戻ります。その理由については、あなたの推測は私と同じくらい正確です。

キャプテン・オブビアスのように聞こえるかもしれないが、できるだけ簡単に説明しようと思う。

Top は、その上にある HTML 要素の上部からのピクセル数を決定する数値です。したがって、必ずしもページの先頭にあるとは限りません。CSS をデザインするときは、HTML の書式設定に注意してください。

50％の場合、左から50％にすると画面の中央に移動するはずです。画面サイズは人によって異なり、画像の中心ではなく画像の左上 (0,0) に割り当てられるため、期待されるように画面の中心に完全に割り当てられるわけではないことに注意してください。 。

これが、マージンを -445 ピクセルまで左に移動して固定するために使用される理由です。

幸運を祈ります。これが理にかなっていれば幸いです。他の回答でまだ苦労している場合に備えて、説明を別の言葉で表現しようとしていました。彼らも素晴らしい答えでした。

(サイズの異なる 2 つのモニターがある場合は、コードをいじって、それぞれの変更が異なるサイズの画面にどのような影響を与えるかを確認することをお勧めします。)

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top