109

ドロップシャドウを使用して、あるdiv（ヘッダー）が別のdiv（ヘッダー）の「上」にあるように見せようとしています。私の問題は、「中央の」divがドロップシャドウを覆っているということです。z-indexを使用してヘッダーdivを中央のdivの周りに配置しようとしましたが、機能していません（影はまだ覆われています）。divの間に休憩を入れると、影が見えるので、コードの一部が正しく機能していることがわかります。私は次のhtmlコードを持っています：

<div id='portal_header_light'>
<img src="Home.png" height="32px" \>
<img src="Wrench.png" height="32px" \>
</div>
<div id='middle'></div>

そしてこのcss：

#portal_header_light {
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px; text-align:center;
    -moz-border-radius: 3px 3px 3px 3px;
    -webkit-border-radius: 3px 3px 3px 3px;
    padding: 0px 3px 0px 3px;
    background: -moz-linear-gradient(center top, #999999 0%,#ffffff 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #999999),color-stop(1, #ffffff));

    -webkit-box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.3);
    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.3);

    z-index:5;
}

#middle{
    height:308px;
    background-color:white;
    z-index:-1;
}

何か案は？ありがとう。

4

3 に答える 3

193

z-indexプロパティは、配置された要素に対してのみ機能します。それらには、、、、position: relativeおよびposition: absolute要素position: fixedがposition: sticky含まれます。

#middledivにを与えるようにしてくださいposition: relative。

于 2010-07-15T19:10:17.833 に答える
19

下に表示する要素にインセットボックスの影を付けてみてください。

.element-that-is-to-be-under{
    -webkit-box-shadow: inset 0 8px 4px -4px #ddd;
    -moz-box-shadow: inset 0 8px 4px -4px #ddd;
    box-shadow: inset 0 8px 4px -4px #ddd;
}

これを行うと、z-indexシャッフルが軽減され、長期的にははるかに幸せになります。

于 2012-04-26T22:09:42.820 に答える
8

ここで他の答えに基づいて、私はこれがの代わりにをposition: relative置くことによってよりうまくいくことを発見しました。それから私は持っている必要はありませんでした、それは（少なくともChromeでは）カーソルリンクのホバー効果を台無しにし、他のいくつかの奇妙な問題を引き起こしました。#portal_header_light#middlez-index: -1

http://jsfiddle.net/thaddeusmt/m6bvZ/

簡略化されたコードは次のとおりです。

<div id="portal_header_light">Header Content</div>
<div id="middle">Test Content</div>

#portal_header_light {
  position: relative;
  padding: 3px;
  background: #eee;
  -webkit-box-shadow: 0px 4px 10px -2px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0px 4px 10px -2px rgba(0, 0, 0, 0.3);
  box-shadow:  0 4px 10px -2px rgba(0, 0, 0, 0.3);
  z-index:5;
}

#middle{
  height:308px;
  background-color:#fee;
  padding: 3px;
}
于 2013-12-10T22:51:41.037 に答える