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;}
If none of the other elements have a defined z-index, using z-index: 1 will be fine.
Model: How is the z-index determined?
z-index
<div id=A> Auto 1
<div id=B> Auto 1.1
<div id=C style="z-index:1"></div> Manual 1
<div id=D></div> Auto 1.1.2
</div>
<div id=E></div> Auto 1.2
</div>
<div id=F></div> Auto 2
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-index properties are checked. If two z-index values equal, their position in the document tree are compared.
Your case:
<div id=X style="z-index:1"> Z-index 1
<div id=Y style="z-index:3"></div> Z-index 3
</div>
<div id=Z style="z-index:2"></div> Z-index 2
You'd expect #Y to overlap #Z, because a z-index of 3 is clearly higher than 2. Well, you're wrong: #Y is a child of #X, with a z-index of 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
There is the best solution. You can't set overflow: auto.
.resizableArea .rightSection {
position: relative;
height: 100%;
margin-left: 150px;
}
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..
<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>
</div>
</div>
<div id="drag" style="z-index: 8; background-color: blue; width: 100px; height: 100px;"> </div>
