Question

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

谢谢大家......

Answer 1

如果其他元素都没有定义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

首先，身体的直接子节点被穿过。遇到两个元素：#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

你希望#Y与#Z重叠，因为3的z-index明显高于2.嗯，你错了：#Y是#X的孩子，{{1 1.两个高于一个，因此，＃Z将显示在#X（和#Y）上。

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

Answer 2

有最好的解决方案。你不能设置overflow：auto。

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

Answer 3

更改为以下内容将解决

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

#drag
{position: absolute;}

Answer 4

有两个选项，将#drag元素放在另一个div的外面并给它一个更高的zIndex或将.rightSection上的溢出设置为可见。

希望这有帮助

Answer 5

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

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

可拖动div的z-index顺序

6 个答案:

模型：如何确定z指数？