可拖动 div 的 z-index 顺序答案

【问题标题】：z-index order for draggable div可拖动 div 的 z-index 顺序
【发布时间】：2011-11-20 22:08:12
【问题描述】：

我想在我的网站中创建一个可拖动的媒体播放器（在我的示例中为蓝色框），我需要将媒体播放器放在所有 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>

谢谢大家...

【问题讨论】：

标签： jquery html css jquery-ui xhtml

【解决方案1】：

如果其他元素都没有定义z-index，则使用z-index: 1 就可以了。

模型：z-index 是如何确定的？

                                         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

首先，遍历body的直接子节点。遇到两个元素：#A 和#F。它们被分配了 1 和 2 的 z-index。对文档中的每个（子）元素重复此步骤。

然后，检查手动设置的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

您希望#Y 与#Z 重叠，因为z-index 为3 明显高于2。好吧，你错了：#Y 是#X 的子代，z-index 为1 . 二大于一，因此#Z 将显示在#X（和#Y）之上。

在这个 plunker 中可以很容易地看到相同的概念： http://plnkr.co/edit/CCO4W0NS3XTPsVL9Bqgs?p=preview

【讨论】：

【解决方案2】：

有最好的解决方案。你不能设置溢出：自动。

.resizableArea .rightSection {
  position: relative;
  height: 100%;
  margin-left: 150px;
}

【讨论】：

感谢它有效。但蓝色框仍在分离器下方。我能解决这个问题吗？
您必须将 .splitter 插入到 .leftSection 内部。之后，必须设置 margin-left: 154px;对于 .rightSection。

【解决方案3】：

改成下面这样就解决了

.resizableArea .rightSection
{ overflow: auto; height: 100%;} 

#drag
{position: absolute;}

【讨论】：

尝试position: static; 到.resizableArea .rightSection

【解决方案4】：

有两种选择，将#drag 元素置于其他 div 之外并为其设置更高的 zIndex 或将 .rightSection 上的溢出设置为可见。

希望对你有帮助

【讨论】：

【解决方案5】：

溢出： .rightSection div 上的 auto 是问题所在。可拖动对象不能（在这种情况下）从他的容器中出来。..

【讨论】：

【解决方案6】：

<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>
    </div>
</div>
<div id="drag"        style="z-index: 8; background-color: blue; width: 100px; height: 100px;">&nbsp;</div>

【讨论】：