orden de índice z para div @ arrastrab

Question

Sep 20, 2011, 11:19 AM

orden de índice z para div @ arrastrab

Quiero crear un reproductor multimedia arrastrable (cuadro azul en mi ejemplo) en mi sitio web y necesito poner el reproductor multimedia delante de todos los divs. ¿Cómo puedo hacer esto

Mi plantilla de página es así:

Puedes probarlo: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;">&nbsp;</div>
            <div class="splitter"     style="z-index: 7; background-color: green;">&nbsp;</div>
            <div class="rightSection" style="z-index: 6; background-color: red;">&nbsp;<br />
                <div id="drag"        style="z-index: 8; background-color: blue; width: 100px; height: 100px;">&nbsp;</div>
            </div>
        </div>
    </div>

    <script language="javascript" type="text/javascript">
        $("#drag").draggable();
    </script>
  </body>
</html>

Gracias a todos..