-2

コンテンツを上に配置できるように、それに応じて 3 つの画像を重ねて背景として機能させたい Web ページがあります。スクロール時に画像が移動してはならないため、固定位置は機能しません。以下は、後ろから前に表示される順序です (1-3)。

  1. img - html で背景画像として設定した sky.jpg。
  2. img - sky.jpg の上に設定された backDrop.png。
  3. img - すべての画像の上と右下に配置したい BtmRight.png 。

両方の画像 (backDrop.png、BtmRight.png) には、順序を決定するための絶対位置と z-index が設定されています。BtmRight.png 画像を他の画像の右下に表示することはできません。ページをスクロールしても、右下の画像はそのままにしておきたいです。また、すべての画像の上にコンテンツを表示したいと思います。以下は私の HTML/CSS です。足りないものはありますか?

            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
            <html xmlns="http://www.w3.org/1999/xhtml">
            <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <title>Untitled Document</title>
            </head>
            <style type="text/css">
            html {
              height: 100%;
              margin: 0;
              padding: 0;
              margin-top:100px;
              background: url(sky.jpg) no-repeat center center fixed; 
              -webkit-background-size: cover;
              -moz-background-size: cover;
              -o-background-size: cover;
               background-size: cover;
            }
            body {
              height: 100%;
              margin: 0;
              padding: 0;
            }
            #imgBack {
                width: 100%;
                margin-top:100px;
                position:absolute;
                z-index:20;
                border:#0FF thin solid;
            }
            #imgBtmRight {
                position:absolute; 
                z-index:50; 
                bottom:0; 
                right:0;
            }
            </style>

            <body>

            <img id="imgBtmRight" src="BtmRight.png" width="413" height="283" /> 



            <img id="imgBack" src="backDrop.png" />

            </body>
            </html>

この件に関する光、または支援をいただければ幸いです。ありがとう

4

1 に答える 1

4

DOM要素を正しい順序でスタックする（およびそのdivを閉じる）ことはおそらく良い考えです：

  1. 体
  2. 背景
  3. BtmRight
  4. コンテンツ

自然な「積み重ね」は下から上へです。各要素（画像、divなど）を1枚の紙と考えてください。HTMLドキュメントを下に移動すると、スタックに紙片が追加されます。z-indexingを明示的に変更しない限り、ペーパーは互いに重なり合っていますが、可能であれば、最初から正しい順序で配置するのが最善です。

編集：

動作しているようです：

リンクされた画像を使用した例

私が変更したのは、画像ソースとボディタグ上の位置だけでした。コードから見逃したものが他にない限り、問題はないはずです。

別の編集：

右下の画像を所定の位置に残したい場合は、position：absoluteではなくposition：fixedをその画像に使用します。

まだ別の編集：

コンテンツを右下の画像の上部に配置する場合は、コンテンツのラッパーを追加して、z-indexingを使用する必要があります。

例

于 2012-09-19T08:42:53.767 に答える