我有一个问题，滑块div隐藏在主div的后面，即切断firefox中的主div。滑块div由固定div（包含触发器的区域）内的absolue div（包含信息的区域）组成，我认为这是问题的一部分。
#main {
position:relative;
z-index:1;
height: 1%;
}
#left {
z-index:2;
position:absolute;
}
#right {
z-index:3;
position:absolute;
}
/* left slider */
#popout {
position: fixed; /* fix the popout to the left side of the screen */
top: 50px;
left: -390px; /* use a negative margin to pull the icon area of the popout off the edge of the page */
width: 420px;
box-shadow: 3px 3px 2px #0437f7;
border-color:#0437f7;
border-size: 2px;
border-style: solid;
color: white;
}
#trigger { /* create a clickable area that triggers the slide in/out effect */
position: absolute; /* position clickable area to consume entire right section of popout (add a border if you want to see for yourself) */
top: 0;
bottom: 0;
right: 0;
cursor: pointer;
padding-top: 67px;
}
img {
height: 200px;
}
/* Some additional CSS to look nice */
#trigger span { /* rotate the 'show' text 90 degrees. If you are using an icon you won't need this bit */
display: inline-block;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
/* end of left slider */
/* right slider */
#popoutts {
position: fixed; /* fix the popout to the left side of the screen */
top: 150px;
right: -280px; /* use a negative margin to pull the icon area of the popout off the edge of the page */
width: 75px;
}
#triggerts { /* create a clickable area that triggers the slide in/out effect */
position: absolute; /* position clickable area to consume entire right section of popout (add a border if you want to see for yourself) */
top: 0;
bottom: 0;
right: 280px;
border-color:#0437f7;
border-size: 2px;
border-style: solid;
color: white;
cursor: pointer;
}
img {
height: auto;
}
/* Some additional CSS to look nice */
#triggerts span { /* rotate the 'show' text 90 degrees. If you are using an icon you won't need this bit */
display: inline-block;
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-ms-transform: rotate(270deg);
-o-transform: rotate(270deg);
transform: rotate(270deg);
}
#popoutts { /* made my popout narrow because vertical text needs less width */
width: 280px;
}
#triggerts { /* shift text down to center it */
padding-top: 67px;
}
/* end of right slider */
<body>
<div id="main">
<script type="text/javascript" language="javascript">
var so = new SWFObject("main.swf", "mymovie", "100%", "100%", "8", "#000000");
so.addParam("menu", "false");
so.addParam("scale", "noscale");
so.addParam("allowFullScreen", "true");
so.write("main");
</script>
<div id="left">
<div id="popout" class="hidden">
<div id="trigger"><span>Show</span></div>
<ul>
<li>
<iframe frameborder="0" height="600" scrolling="yes" src="http://warframe.dashnet.org/" width="390"></iframe>
</li>
</ul>
</div>
</div>
<div id="right">
<div id="popoutts" class="hidden">
<div id="triggerts"><span>Show</span></div>
<ul>
<li>
<div id="ts3viewer_1003552" style="width:280px; background-color:; background-image:url('http://utsaservers.com/TS3_PHP_Framework-1.1.17/images/viewer/tsbgblue.png');">
</div>
<script type="text/javascript" src="http://static.tsviewer.com/short_expire/js/ts3viewer_loader.js"></script>
<script type="text/javascript"></script>
</li>
</ul>
</div>
</div>
</body>
链接到以chrome工作的页面：http://utsaservers.com/v3/slider.html