可拖动div的z-index顺序

Question

可拖动div的z-index顺序

ogu*_*gun 2 html css xhtml jquery jquery-ui

我想在我的网站上创建一个可拖动的媒体播放器(在我的例子中为蓝盒子),我需要将媒体播放器放在所有div之前.我怎样才能做到这一点？

我的页面模板是这样的:

<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>

Run Code Online (Sandbox Code Playgroud)

谢谢大家......

Answer 1

Rob*_*b W 18

如果其他元素都没有定义z-index,则使用z-index: 1将没有问题.

型号:z指数是如何确定的？

                                         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

Run Code Online (Sandbox Code Playgroud)

首先,身体的直接子节点被穿过.遇到两个元素:#A和#F.为它们分配z-index为1和2.对文档中的每个(子)元素重复此步骤.

然后,z-index检查手动设置的属性.如果两个z-index值相等,则比较它们在文档树中的位置.

你的情况:

<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

Run Code Online (Sandbox Code Playgroud)

你期望#Y重叠#Z,因为z-index3中的a明显高于2.嗯,你错了:#Y是#X的孩子,a z-index为1.两个高于1,因此,#Z将显示在#X(和#Y)上.

这个插件可以很容易地看到相同的概念:http://plnkr.co/edit/CCO4W0NS3XTPsVL9Bqgs？p = preview

归档时间：	14 年，1 月前
查看次数：	4219 次
最近记录：	10 年，2 月前