我在网页上遇到一个小问题(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;
}