z-index不适用于滑块和许多div

Question

我对此网站有疑问：http://www.lookcommunication.it/testalessio/site7/index.html

我想要显示带有徽标的白色方块而不是滑块

HTML

 <div id="box_logo">
        <img src="img/logo.png" alt="logo"/>
 </div>

#box_logo{width:251px; height:251px; background-color:#fff;float: left;
position: relative;left: 71px;top: -45px;z-index: -2;text-align: center; border-radius: 5px;}

滑块代码：

 <div class="flexslider">
  <ul class="slides">
    <li>
      <img src="images/slider1.jpg" />
    </li>
    <li>
      <img src="images/slider2.jpg" />
    </li>
    <li>
      <img src="images/slider3.jpg" />
    </li>
  </ul>
</div>

CSS

.flexslider{
margin: 180px 0 60px;
background: #fff;
border: 4px solid #fff;
position: relative;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 1px 4px rgba(0,0,0,.2);
-moz-box-shadow: 0 1px 4px rgba(0,0,0,.2);
-o-box-shadow: 0 1px 4px rgba(0,0,0,.2);
box-shadow: 0 1px 4px rgba(0,0,0,.2);
zoom: 1;
}

我尝试将z-index:-9999放入.flexslider，但它不起作用。

建议？

Answer 1

您需要为#box_logo

设置Z-index

更改

#box_logo{ z-index:-2; }

到

#box_logo{ z-index:1000; }

Answer 2

请注意以下add

中的z-index:-2; selector

<强> CSS

.flexslider{
z-index:-2;
}

Answer 3

在z-index: 3和#box_logo中使用#logo_shadow，因为幻灯片li有zindex: 2

#box_logo {
    background-color: #FFFFFF;
    border-radius: 5px 5px 5px 5px;
    float: left;
    height: 251px;
    left: 71px;
    position: relative;
    text-align: center;
    top: -45px;
    width: 251px;
    z-index: 3;
}
#logo_shadow {
    background-image: url("../img/logo_shadow.png");
    background-repeat: no-repeat;
    float: left;
    height: 20px;
    position: relative;
    right: 177px;
    top: 199px;
    width: 251px;
    z-index: 3;
}

Answer 4

在flexslider和z-index上使用z-index：1000：在徽标上使用1001.