オーバーレイの上部に表示されるように内側のdivにz-indexを適用する

1つのdivを除くページ全体を透明なオーバーレイでオーバーレイしようとしています。問題は、私が上に欲しいdivがfixed divの子だということです。どのように私は上にそれを作るが、オーバーレイの下に親を残す？オーバーレイの上部に表示されるように内側のdivにz-indexを適用する

下のコードでは、オーバーレイの上に表示する要素は.holderです。ここにはJS Fiddleがあります。

HTML：

<!DOCTYPE html> 
<html> 
    <head> 
    <title>z-index tests</title> 
    <link rel="stylesheet" type="text/css" href="style.css"> 
    </head> 
    <body> 
    <div class="root"> 
    Root 
     <div class="header"> 
     Header 
     <div class="holder"> 
      Holder 
     </div> 
     </div> 
     <div class="content"> 
     content 
     <div class="box"></div> 
     </div> 
    </div> 
    <div class="overlay"></div> 
    </body> 
</html>

CSS：

.box { 
    height: 100px; 
    width: 100px; 
    border: 1px solid #000; 
} 

.root { 
    display: block; 
    background-color: grey; 
} 

.header { 
    background-color: red; 
    position: fixed; 
    top: 0px; 
    width: 1600px; 
} 

.holder { 
    background-color: green; 
    height: 60px; 
    width: 1600px; 
    z-index: 1002; 
    position: absolute; 
} 

.content { 
    background-color: blue; 
} 

.overlay { 
    position: fixed; 
    top:0; 
    bottom:0; 
    left:0; 
    right:0; 
    background-color: rgb(50,50,50); 
    opacity:0.8; 
    z-index:10; 
}

出典

2016-11-25 Abdul

あなたがすることはできません。それで、z-indexとスタッキングレイヤーが機能します。 .holderが.headerの子孫で、それ自体のスタッキングコンテキストをposition: fixedで作成するまで、.holderをオーバーレイの上にプッシュする唯一の方法は、.header外のDOMツリー内でそれを移動し、.overlayの兄弟または子孫にすることです。

2番目のオプション（理由はありませんが、.headerは固定されていないと思われます）は、スタッキングコンテキストを作成しないように.headerのスタイルを変更することです。 absoluteに変更し、z-indexを削除してください。その場合、.holderのスタッキングコンテキストは.overlayと同じレベルになり、z-indexでそれらの深度を操作することができます。

list of CSS propertiesを参照して、新しいスタッキングコンテキストを作成してください。

私はあなたのことを思いやりのままにしておきます。

出典

2016-11-25 21:51:25

とにかく感謝Erykを。私は何をしようとしているのかについて別のアプローチをとるつもりです。 [これ]（http://stackoverflow.com/a/28616718/1840918）私の目的のために動作し、おそらく頭痛の多くを保存します！ – Abdul

あなたはカンニングと.holderに大規模なボックスに影を追加することによって、同じ効果を得ることができます：

.box { 
 
    height: 100px; 
 
    width: 100px; 
 
    border: 1px solid #000; 
 
} 
 

 
.root { 
 
    display: block; 
 
    background-color: grey; 
 
} 
 

 
.header { 
 
    background-color: red; 
 
    position: fixed; 
 
    top: 0px; 
 
    width: 1600px; 
 
    /*z-index: 1;*/ 
 
} 
 

 
.holder { 
 
    background-color: green; 
 
    height: 60px; 
 
    width: 1600px; 
 
    z-index: 1002; 
 
    position: absolute; 
 
} 
 

 
.content { 
 
    background-color: blue; 
 
} 
 

 
.highlight { 
 
    box-shadow:0 0 0 9999999px rgba(50,50,50,0.8); 
 
}

<div class="root"> 
 
    Root 
 
    <div class="header"> 
 
     Header 
 
     <div class="holder highlight"> 
 
     Holder 
 
     </div> 
 
    </div> 
 
    <div class="content"> 
 
     content 
 
     <div class="box"></div> 
 
    </div> 
 
    </div>

JS Fiddle

出典

2016-11-25 22:14:59 Moob

オーバーレイの上部に表示されるように内側のdivにz-indexを適用する

答えて

関連する問題