10

HTML に次の div があります。

<div class="main">
<div class="bgimage"></div>
<div class="content">Text</div>

それは私の体の中に直接あります。

次の CSS を使用します。

body {
    margin: 0;
    padding: 20px 0;
}
.content {
    filter: alpha(opacity=50);
    -moz-opacity: 0.5;
    opacity: 0.5;
}
.content {
    position: relative;
    z-index: 1;
    border: #000 thin solid;
    width: 960px;
    margin-left: auto;
    margin-right: auto;
    background-color: #000;
}
.bgimage {
    position: absolute;
    z-index: -1;
    width: 1024px;
    height: 768px;
    margin-left: auto;
    margin-right: auto;
    background-image: url(bg1.jpg);
}

基本的に、背景画像を表示する Div があり、この上に透明な別の Div を作成します。この現在のコードは機能しますが、コンテンツ div を上から下に移動しようとしているときに問題が発生します。

たとえば、 margin-top:100pxを追加すると、画像も下がります。同じz-index上になければ触れないと思った？マージンを追加すると、bgimage div も強制的に下げられるのはなぜですか?

また、コンテンツのクラスを絶対位置と zindex で div にしようとしましたが、これは中心になりません。これをどのように解決すればよいですか？

4

4 に答える 4

12

あなたのCSSは

.bgimage { position: relative; }

.content { position: absolute; }

したがって、.content は .bgimage に対して相対的に配置され、現在の CSS は .bgimage をドキュメントに対して相対的に配置します。

CSSの配置に関するこのリンクを参照してください

于 2010-03-27T03:26:08.963 に答える
4

z-index配置とは関係ありません。要素のレンダリング順序にのみ影響します。Position: relative要素を本来あるべき場所にレンダリングし、最終的なleft、right、topまたはbottom座標でオフセットするようにブラウザに指示します。したがって、マージン、パディングなどは引き続き影響します。

position: absolute位置の独立性のみを保証します。

于 2010-03-27T01:59:53.240 に答える
3

コードに「z-index」や「position：absolute」はまったく必要ないと思います。ただし、私たちに明らかにしていない他の問題がない限り。

背景をDIVclass= "main"の中央に配置するには：

body{margin:0;padding:20px 0;}
.main{background:transparent url(bg1.jpg) no-repeat center top;}
.content{border:#000 thin solid;width:960px;margin-left:auto;margin-right:auto;background-color:#000;opacity: 0.5;filter:alpha(opacity=50);-moz-opacity: 0.5;}

「センタートップ」は、背景画像のセンタートップを、適用される要素のセンタートップに配置します。あなたは適用したいかもしれません

min-width:1024px;_width:1024px;

同じ要素に-狭いウィンドウがエッジを隠すのを防ぎます（これにより、「ビューポート」が背景の寸法よりも狭い場合に要素がレンダリングされる方法が変更されます）。

事前に変更されたコードで実行できる唯一のことは、変更されたコードでは実行できないことです。

  • cssの「width」プロパティと「height」プロパティを使用して、背景画像をトリミングします（ネイティブで1024px x 768pxでない場合）。
  • class = "main"要素にすでに背景画像が設定されている場合、ほとんどのブラウザは、同じ要素に複数の背景をスタックするために必要なCSS3をサポートしていません。

上記の「z-indexing」と「position」プロパティについて述べられたことのいくつかは正しいものでしたが、言及できませんでした。「フロー」からclass="content"要素を削除しました。class = "content"要素のコンテンツが大きくなると、祖先要素は大きくなりません。これは、「zインデックス」要素と「フロー内」に残る要素の重要かつ基本的な違いです。

その他の注意事項：

  • 同じz-indexを持つ要素は、HTML内の順序に従ってスタックされます（HTMLの後半では、画面上に上に描画されることを意味します）
  • 「z-index」は、要素を取得するために「position :(絶対|相対）」、「z-index :(有効な値）」、およびIIRC「（上|左|下|右）:(有効な値）」を必要とします「流れの外」
于 2010-03-27T05:12:18.483 に答える
1

CSS の絶対配置は常に、「position: relative」を持つ最新の祖先に対して「相対的」に行われます。それ以外の場合は、デフォルトで body タグが使用されます。含めた CSS だけがこれらの div に影響する場合、.content div は .main div に対して相対的に配置されますが、.bgImage はタグに基づいて配置されます。

.content と .bgImage の両方をロックステップで移動させたい場合は、「position: relative」を div.main に追加する必要があります。

于 2010-03-27T02:47:50.330 に答える