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

Simplest fix is to add this CSS rule:

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

You might consider restructuring your markup to avoid using negative z-index because you'll risk micromanaging them (as we've already begun to do by adding a z-index to the <body>).

于 2012-12-02T17:57:15.510 回答