jQuery 中有没有办法将 div 放在前面？

Posted 2023-03-06

【中文标题】jQuery 中有没有办法将 div 放在前面？

【英文标题】：Is there a way in jQuery to bring a div to front?

【发布时间】：2011-03-15 01:50:25

【问题描述】：

如果我有一堆绝对定位的 div 并且它们重叠，我如何让某个 div 出现在前面？再次感谢大家！

【问题讨论】：

***.com/questions/5680770/…

【参考方案1】：

使用 .css() 并应用位置属性和 z-index 属性。

【讨论】：

或者应用一个具有 jQuery 所需属性的类。

【参考方案2】：

这是一个 CSS 的东西，而不是一个 jQuery 的东西（尽管你可以使用 jQuery 来修改 css）。

$('element').css('z-index', 9999);  // note: it appears 'zIndex' no longer works

或者，绝对定位会将某些东西带到顶部：

$('element').css('position', 'absolute');

【讨论】：

我认为你将需要两者，所以 position:absolute AND z-inde:1

同意，但这确实属于 css，除非您对用户交互做出反应

他好像想动态做这个，想知道jQuery是否有这个功能。

将 div 移动到父节点列表的末尾通常也会将其带到顶部。在不使用 z-index 的情况下，绘制顺序通常是从第一个到最后一个元素，当然是分层的

【参考方案3】：

为此使用 jQuery 将是矫枉过正。而是使用 CSS 的 z-index property:

<style type="text/css">
  #myElement 
    z-index: 50000;
  
</style>

【讨论】：

我最初同意这个答案，但听起来问题是在需要时将某个 div（重叠 div）放在前面。将特定 div 设置为静态标记的顶部并不能解决问题。

5 年后。如何将 div 放在前面？答：z-index: 5000000000000;

基本上它必须比页面上最高的z-index高1。

【参考方案4】：

当您使用多个元素时，您必须循环查看哪个具有最高的 z-index，并将顶部设置为 +1。

http://jsfiddle.net/forresto/Txh7R/

var topZ = 0;
$('.class-to-check').each(function()
  var thisZ = parseInt($(this).css('zIndex'), 10);
  if (thisZ > topZ)
    topZ = thisZ;
  
);
$('.clicked-element').css('zIndex', topZ+1);

---

对于非 CSS 版本（如果没有指定层的 z-index），您也可以再次附加元素：

$('.click-to-top').click(function()
  $(this).parent().append(this);
);

（我不知道这是否比 CSS z-index 慢。）

对于非 CSS 非 jQuery，只需再次追加即可：

// var element = document...;
element.parentNode.appendChild(element);

【讨论】：

这对于那些想要动态的人来说是一个有用的答案，特别是如果您使用可拖动元素。

【参考方案5】：

使用 jQuery（就像你问的那样）：

$('#a-div').parent().append($('#a-div')); // Pop a div to the front

奇怪的是每个人都是如何使用 z-index 的。当您可以在 DOM 中将其弹出到最前面时，为什么要覆盖自然堆叠顺序？

【讨论】：

很棒的想法和方法，是的，当这种方法存在时，选择 z-index 很奇怪，我接受我想到的第一件事是 z-index：$

这种方法是否附加了被附加子项的多个元素？请为我澄清一下。

@qualebs 不，它正在抓取现有元素并将其移动到堆叠顺序的顶部

@Yarin 非常感谢您为我节省了一段样板代码。这个答案应该是公认的答案。

【参考方案6】：

element.style.zIndex = Date.now();

【讨论】：

请考虑对您的代码如何帮助回答问题发表评论