0

こんにちは、私は CSS ボックスの影に少し慣れていません。

私はHTMLで次のコードを書きました、

<div id="left_content"></div>
<div id="right_content"></div>

そしてCSSの次のコード、

#left_content {
  width : 250px;
  height: 350px;
  background-color : #DDDDDD;
  position : fixed;
  z-index : 10;
  float: left;
}

#right_content{
  width : 700px;
  height: 350px;
  background-color : #FFFFFF;
  float : right;
  -webkit-box-shadow: -4px -2px 5px rgba(48, 50, 50, 0.9);
  -moz-box-shadow:    -4px -2px 5px rgba(48, 50, 50, 0.9);
  box-shadow:         -4px -2px 5px rgba(48, 50, 50, 0.9);
}

左のコンテンツは固定されています。右のコンテンツをスクロールすると、影が適用されません。

左側のコンテンツに影を落とす必要があります。右側のコンテンツの z-index を増やしたくありません。

どんな助けもかなりのものです。前もって感謝します。

4

2 に答える 2

0

右の DIV の z-index は、左のそれより高くなければなりません。

#right_content{
    z-index:11;
}

ここにjsfiddleがあります

于 2014-12-05T13:23:36.313 に答える