css - 絶対的な立場、誰かがこれを説明できますか

Question

これが私が説明する必要があるCSSのスニペットです：

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

わかりました。明らかに、画像の絶対的な配置です。

更新： 幅は860pxです。それが違いを生む場合、実際の画像は100x100ですか？

score 3 · Accepted Answer

Topは、html要素の上部からの距離です。これが絶対位置を持つ別の要素内にある場合は、その上部からの距離です。
＆3。画像の幅にもよりますが、画像を水平方向に中央揃えにする場合があります（画像の幅が890pxの場合）。ただし、画像を水平方向に中央揃えにする方法は他にもあります。より一般的には、これは既知の高さのブロックを垂直方向に中央揃えするために使用されます（これは既知の高さのブロックを垂直方向に中央揃えする最も簡単な方法です）。
```
top: 50%
margin-top: -(height/2)px;
```

score 3 · Accepted Answer

これはおそらく、要素をページの中央に配置するために行われました（「デッドセンター」手法を使用）。

これは次のように機能します。要素の幅が890pxであるとすると、とに設定されposition:absolute、left:50%左端がブラウザの中央に配置されます（他の要素の中央になる可能性がありますposition:relative）。

次に、負のマージンを使用して、要素の幅の半分に等しい距離だけ左端を左に移動し、要素を中央に配置します。

もちろん、これは正確に中央に配置されていない可能性があります（要素が実際にどれだけ広いかによって異なりwidthます。貼り付けたコードにはないため、確認することはできません）が、ページの中央に対して要素を配置していることは確かです。

score 2 · Accepted Answer

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

はい、ページの上部です。

残りの50％は何をしますか？

コンテンツを画面の中央に移動します（100％は右端になります）。

左マージンが-445pxになっているのはなぜですか？

「左：50％」で移動すると、445ピクセル左に戻ります。

score 2 · Accepted Answer

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

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

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

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

次に、要素はその50％ポイントから445px左に「移動」されます。

score 1 · Accepted Answer

CSSボックスモデルを読むことで、知っておく必要のあるすべてのことを見つけることができます

score 0 · Accepted Answer

位置が絶対的な場合、topは親からの垂直距離です（おそらくbodyタグなので、0はブラウザウィンドウの上端です）。左50％は、左端からの距離です。負のマージンはそれを445px左に戻します。理由については、あなたの推測は私のものと同じくらい良いです。

7 に答える 7