html - 体の位置を無視した Chrome の体の背景

Question

例として使用して Chrome (v23 のテスト) の特定のページで body 要素を移動するposition: relative; top: 100px;と、背景は引き続きビューポート全体に適用されます。

これは Chrome のバグですか、それとも動作を説明したり、柔軟なソリューションを提供したりできますか?

Answer 1

これは実際にはすべてのブラウザーで予期される動作です。要素は実際に上から 100 ピクセルオフセットされていますが、この回答bodyの最初の部分で説明されているように、背景自体はビューポートにシームレスに反映されています。これはおそらく、背景属性をオンに設定すると背景がビューポートに伝播され、ページ全体に背景が適用されたように見える、HTML プレゼンテーション属性の時代からの名残りです。body

背景を要素のみに制限したい場合はbody、単純にhtml以外の背景色を指定するtransparentか、背景画像を指定します。ビューポートはhtml代わりに の背景を使用します。