0

私は次のHTMLとCSSを持っており、クリック可能であるはずのドロップシャドウを備えた大きなパネルを作成しています。そうではありません。Zインデックスと相対位置の問題だと思いますが、ドロップシャドウを失うことなく機能させる方法を見つけることはできません。

http://jsfiddle.net/ddfAL/

HTML：

<div id="container">
<div class="drop-shadow"><a href="#">Click</a></div>
</div>​

CSS：

#container {
    width: 500px;
    height: 500px;
    padding: 50px;
    z-index: -10;
    position: relative;
    background-color: #bbb;
}

a {
    display: block;
    padding: 50px;
}

.drop-shadow {
  position: relative;
  color: #888;
  background: #fdfdfd;
  border: 1px solid #ccc;
  -moz-box-shadow: inset 0 0 0 5px #f3f0e9, inset 0 0 13px rgba(0, 0, 0, 0.9);
  -webkit-box-shadow: inset 0 0 0 5px #f3f0e9, inset 0 0 13px rgba(0, 0, 0, 0.9);
  -o-box-shadow: inset 0 0 0 5px #f3f0e9, inset 0 0 13px rgba(0, 0, 0, 0.9);
  box-shadow: inset 0 0 0 5px #f3f0e9, inset 0 0 13px rgba(0, 0, 0, 0.9);
}


.drop-shadow:before, .drop-shadow:after {
  content: "";
  position: absolute;
  z-index: -1;
  bottom: 15px;
  left: 5px;
  width: 50%;
  height: 20%;
  -moz-box-shadow: 0 15px 8px rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: 0 15px 8px rgba(0, 0, 0, 0.5);
  -o-box-shadow: 0 15px 8px rgba(0, 0, 0, 0.5);
  box-shadow: 0 15px 8px rgba(0, 0, 0, 0.5);
  -moz-transform: rotate(-3deg);
  -webkit-transform: rotate(-3deg);
  -o-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  transform: rotate(-3deg);
}

.drop-shadow:after {
  right: 5px;
  left: auto;
  -moz-transform: rotate(3deg);
  -webkit-transform: rotate(3deg);
  -o-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  transform: rotate(3deg);
}

</ p>

4

1 に答える 1

2

最も簡単な修正は、このCSSルールを追加することです。

body {
   position:relative;
   z-index:-11;
}

ネガティブを使用しないようにマークアップを再構築することを検討してください。これは、マークアップをz-indexマイクロ管理するリスクがあるためです（にを追加することですでに開始しているz-indexため<body>）。

于 2012-12-02T17:57:15.510 に答える