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://www.istanbulmatematik.com/drag/\[code\]<html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>Popup Test</title> <script src="http://stackoverflow.com/questions/7482840/js/jquery.js" type="text/javascript"></script> <script src="http://stackoverflow.com/questions/7482840/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>\[/code\]Thanks all...
z-index problem
- Thread starter t1utko
- Start date