web-dev-qa-db-ja.com

z-indexを使用してDivの上にDiv

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インデックス上にない場合は触れないと思いますか？なぜマージンを追加するとbgimage divも強制されるのですか？

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

htmlcssmarginz-index
9
Iacks

あなたのCSSは

.bgimage { position: relative; }

.content { position: absolute; }

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

cSSの配置については、これを参照してください link

10
pixeltocode

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

_position: absolute_のみが位置の独立性を保証します。

3
zneak

コードに「z-index」や「position：absolute」の必要はまったくありません-まだ明らかにしていない複雑な問題がない限り。

背景をDIV class = "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：（absolute | relative）"、 "z-index：（valid value）"、およびIIRC "（top | left | bottom | right）：（valid value）"が必要です「流れから」
3
David

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

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

1
Marc B