我想在我的网站上创建一个可拖动的媒体播放器(在我的例子中为蓝盒子),我需要将媒体播放器放在所有div之前.我怎样才能做到这一点？
我的页面模板是这样的：
你可以尝试一下：http://jsfiddle.net/krMhY/
<html>
<head>
<Meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Popup Test</title>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.ui.full.js" type="text/javascript"></script>
<style type="text/css">
.contents
{position:fixed; bottom:0; left: 0; right:0; top:100px;}
.resizableArea
{position:absolute; bottom:0; top:0; width:100%;}
.resizableArea .leftSection
{position:relative; float:left; width: 150px; height:100%;}
.resizableArea .splitter
{position: absolute; left: 150px; width: 4px; height: 100%;}
.resizableArea .rightSection
{position: relative; overflow: auto; height: 100%;}
</style>
</head>
<body style="z-index: 1; background-color: purple;">
<div class="contents" style="z-index: 2; background-color: black;">
<div class="resizableArea" style="z-index: 3; background-color: aqua;">
<div class="leftSection" style="z-index: 4; background-color: yellow;"> </div>
<div class="splitter" style="z-index: 7; background-color: green;"> </div>
<div class="rightSection" style="z-index: 6; background-color: red;"> <br />
<div id="drag" style="z-index: 8; background-color: blue; width: 100px; height: 100px;"> </div>
</div>
</div>
</div>
<script language="javascript" type="text/javascript">
$("#drag").draggable();
</script>
</body>
</html>
谢谢大家……
解决方法
改为以下将解决
.resizableArea .rightSection
{ overflow: auto; height: 100%;}
#drag
{position: absolute;}