draggable div的z-index顺序 [英] z-index order for draggable div
本文介绍了draggable div的z-index顺序的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想在我的网站中创建一个可拖动的媒体播放器（在我的例子中为蓝色框），我需要将媒体播放器放在所有div之前。
我的页面模板是这样的：
href =http://jsfiddle.net/krMhY/ =nofollow> http://jsfiddle.net/krMhY/
< html>
< head>
< meta http-equiv =content-typecontent =text / html; charset = utf-8/>
< title>弹出测试< / title>
< script src =js / jquery.jstype =text / javascript>< / script&
< script src =js / jquery.ui.full.jstype =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 =contentsstyle =z-index：2; background-color：black;>
< div class =resizableAreastyle =z-index：3; background-color：aqua;>
< div class =leftSectionstyle =z-index：4; background-color：yellow;& nbsp;< / div>
< div class =splitterstyle =z-index：7; background-color：green;& nbsp;< / div>
< div class =rightSectionstyle =z-index：6; background-color：red;>& nbsp;< br /
< div id =dragstyle =z-index：8; background-color：blue; width：100px; height：100px;>& nbsp;< / div&
< / div>
< / div>
< / div>
< script language =javascripttype =text / javascript>
$（＃drag）。draggable（）;
< / script>
< / body>
< / html>感谢所有... 解决方案更改为以下内容将解决
.resizableArea .rightSection
{overflow：汽车; height：100％;}
#drag
{position：absolute;}
I want to create draggable a media player (blue box in my example) in my website and I need to put media player in front of all divs. How can i do this?
My page template is like that:
You can try it: 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>
Thanks all...
解决方案 changing to the following will solved
.resizableArea .rightSection
{ overflow: auto; height: 100%;}
#drag
{position: absolute;}
这篇关于draggable div的z-index顺序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
