可拖动 div 的 z-index 顺序
Posted
技术标签:
【中文标题】可拖动 div 的 z-index 顺序【英文标题】：z-index order for draggable div 【发布时间】：2011-11-20 22:08:12 【问题描述】：我想在我的网站中创建一个可拖动的媒体播放器（在我的示例中为蓝色框），我需要将媒体播放器放在所有 div 的前面。我该怎么做？
我的页面模板是这样的：
你可以试试：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;"> </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>
谢谢大家...
【问题讨论】：
【参考方案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;"> </div>
<div class="splitter" style="z-index: 7; background-color: green;"> </div>
<div class="rightSection" style="z-index: 6; background-color: red;"> <br /></div>
</div>
</div>
<div id="drag" style="z-index: 8; background-color: blue; width: 100px; height: 100px;"> </div>
【讨论】：
以上是关于可拖动 div 的 z-index 顺序的主要内容，如果未能解决你的问题，请参考以下文章