{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 神经病院院长 的问题《z-index order for draggable div》','https://www.manongdao.com/q-1212395.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
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...
There is the best solution. You can't set overflow: auto.
changing to the following will solved
There are two options, take the #drag element outside the other div's and give it a higher zIndex or set the overflow on the .rightSection to visible.
Hope this helps
The overflow: auto on the .rightSection div, is the problem. The draggable object can't (in this case) get out of his container..
If none of the other elements have a defined
z-index, usingz-index: 1will be fine.Model: How is the z-index determined?
First, the direct child nodes of the body are walked through. Two elements are encountered: #A and #F. These are assigned a z-index of 1 and 2. This step is repeated for each (child) element in the document.
Then, the manually set
z-indexproperties are checked. If twoz-indexvalues equal, their position in the document tree are compared.Your case:
You'd expect #Y to overlap #Z, because a
z-indexof 3 is clearly higher than 2. Well, you're wrong: #Y is a child of #X, with az-indexof 1. Two is higher than one, and thus, #Z will be shown over #X (and #Y).The same concept can be easily visualized in this plunker: http://plnkr.co/edit/CCO4W0NS3XTPsVL9Bqgs?p=preview