Safari浏览器忽略zIndex

时间:2013-09-16 08:22:31

标签: css

我在网页上遇到一个小问题(http://goldschmiede-h-j-baier.de/dev/index.php?id=10)一切都正确显示,页脚用z-index向上推。但是safari确实没有z-index,我不知道为什么。页脚总是放在主容器后面......

/*Website*/
html,body {
  background:#000;
  font-family:"Trebuchet MS",Helvetica,Jamrul,sans-serif;
  color:#fff;
  overflow:hidden;
  border-left: 5px solid;
  border-right: 5px solid;
}
.maincontainer {
  overflow:auto;
  height:100%;
  width: 100%;
}
#footer {
  height:64px;
  position:fixed;
  bottom:30px;
  z-index:200;
}
#navigation {
  position:fixed;
  left:30%;
}

#logo {
  background:url(../images/logo-baier.png);
  width:217px;
  height:75px;
  position:fixed;
  bottom:30px;
  z-index:202;
  left:10%;
}
#social {
  position:fixed;
  right:0;
  top:30px;
  z-index:302;
}



/*Slider*/
#slides {
  position:relative;
}
.slides {
  background:#000;
  /*margin-top:10px;*/
  border-bottom: 10px solid #fff;
   border-top: 10px solid #fff;
}
#slides .slides-container {
  display:none;
}
#slides .scrollable {
  *zoom:1;
  position:relative;
  top:0;
  left:0;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  height:100%;
}
#slides .scrollable:after {
  content:"";
  display:table;
  clear:both;
}
.slides-navigation {
  margin:0 auto;
  position:absolute;
  z-index:3;
  top:56%;
  width:100%;
}
.slides-navigation a {
  position:absolute;
  display:block;
}
.slides-navigation a.prev {
  left:0px;
}
.slides-navigation a.next {
  right:0px;
}
.slides-pagination {
  position:absolute;
  z-index:3;
  bottom:0;
  text-align:center;
  width:100%;
}
.slides-pagination a {
  border:2px solid #222;
  border-radius:15px;
  width:10px;
  height:10px;
  display:-moz-inline-stack;
  display:inline-block;
  vertical-align:middle;
  *vertical-align:auto;
  zoom:1;
  *display:inline;
  background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR4nGP6zwAAAgcBApocMXEAAAAASUVORK5CYII=");
  margin:2px;
  overflow:hidden;
  text-indent:-100%;
}
.slides-pagination a.current {
  background:#222;
}
.next {
  width:35px;
  height:55px;
  background-image:url("../images/str.png");
  background-position:42px -44px;
}
.prev {
  width:35px;
  height:55px;
  background-image:url("../images/str.png");
  background-position:-7px -44px;
}
.slides-pagination {
  display:none;
}
.bottom {
  position:absolute;
  z-index:3000;
  bottom:90px;
  width:100%;
  right:-60%;
}
.bottom a {
  width:51px;
  height:32px;
  background-image:url("../images/str.png");
  background-position:0px 0px;
  display:inline-block;
}
.top {
  position:absolute;
  z-index:3000;
  top:0;
  text-align:center;
  width:100%;
  margin-top: 10px;
}
.top a {
  width:51px;
  height:32px;
  background-image:url("../images/str.png");
  background-position:-68px 0px;
  display:inline-block;
}

0 个答案:

没有答案