0

我对这个网站有疑问：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但它不起作用。

建议？

4

4 回答 4

2

您需要设置 Z-index 为#box_logo

改变

#box_logo{ z-index:-2; }

至

#box_logo{ z-index:1000; }
于 2013-09-02T10:11:36.910 回答
0

使用z-index: 3in#box_logo并且#logo_shadow因为 slide 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;
}
于 2013-09-02T10:14:36.830 回答
0

像这样请add z-index:-2;在下面selector

CSS

.flexslider{
z-index:-2;
}

在此处输入图像描述

于 2013-09-02T10:10:34.370 回答
-1

在 flexslider 上使用 z-index:1000，在 logo 上使用 z-index:1001。

于 2013-09-02T10:13:36.720 回答