0

div の下に影を表示しようとしています。これまでのところ、クロム/クロム以外で動作します。簡単に言うと、影を描画する div は、z-index プロパティが設定されていても、影がdiv の上に表示されるにもかかわらず、本来のように表示されません。Html は次のようになります。

<body>  
<div id="header" class="box clear">
    <div id="logo">
       <img class="obraz_srodek" src="http://ocento.hol.es/tz/logotyp.png" title="ocentologotype"/>

    </div>

</div>
<div class="content">// Javascript/jQuery soon</div>​​​
<div id="test">Padding test</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

私のcssファイルは次のようなものです：

body
{
background-image:url('bg.jpg');
background-repeat: repeat;
}

html{
  height: 100%;
  width: 98%;
    padding:0;
    margin:0;
}
body {
  min-height: 100%;
  min-width:98%;

}

.content{
    padding-top:55px;

}

.obraz_srodek {
    overflow:hidden;
    height:25px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding-top:7px;

}
#header
{
    position: fixed;
    background-color: white;
    min-height: 40px;
    min-width: 100%;
    top: 0px;
    left: 0px;


}

.box {
  position: relative;

  background-color: #fff;
  box-shadow: 0 0px 5px rgba(0,0,0,0.25), 0 0 5px rgba(0,0,0,0.1) inset;
  border-radius: 1%     1%     1%     1% /     1%     1%     1%     1%;
}
.box:after {
      position: absolute;
      width: 80%;
      height: 40%;
      left: 10%;
      border-radius: 50%;
      z-index: -4;
      bottom: 0%;
      content: "";
      box-shadow: 0 7px 16px rgba(0,0,0,0.4);
      }
4

1 に答える 1