隐藏div的z-index为何导致页面元素无法拖拽？

Nice catch! This is a tricky edge case that trips up a lot of developers—let's unpack why this is happening and how to fix it without touching your z-index.

Why Your Hidden Div Is Still Blocking Drags #

Normally, when you use $('.upper').hide(), jQuery sets the element's display property to none. Elements with display: none are completely removed from the browser's render tree—they don't take up space, don't receive mouse events, and shouldn't interfere with anything below them. But your scenario suggests one of two key issues:

1. The element isn't actually display: none
   This is the most common culprit. If you're using an animation method like fadeOut() instead of a straight hide(), the element only gets opacity: 0 during the animation—its display stays block until the animation finishes. Even though it's invisible, it's still in the render tree with that massive z-index: 2000, so it acts like an invisible shield blocking all mouse events (including drags) on elements below it.

   • To verify this, open your browser's DevTools, select the .upper element, and check its computed styles to confirm if display is truly none.

2. Event delegation or drag plugin quirks
   If you've bound drag-related events (like mousedown or dragstart) to this element using event delegation (e.g., on document or body), some drag plugins might misinterpret the event target during bubbling—even for hidden elements. This is far less common, but worth checking if the first fix doesn't work.

Fixes That Keep Your z-index Intact #

Here are targeted solutions based on the root cause:

If the element isn't truly display: none

• Force proper hiding after animations: If you need the fade effect, explicitly set display: none once the animation completes:

  $('.upper').fadeOut(function() {
    $(this).css('display', 'none');
  });
  

• Skip animations entirely: Use the plain hide() method instead of animated effects to ensure immediate removal from the render tree:

  $('.upper').hide();
  

If you can't use display: none (e.g., for layout reasons)

Add pointer-events: none to the hidden state of your element. This tells the browser to ignore all mouse interactions with the element, letting clicks/drags pass through to elements below—while keeping your z-index intact:

.upper.hidden {
  visibility: hidden; /* Keeps element in layout if needed */
  pointer-events: none; /* Ignores mouse events */
}

Then use this class to hide the element instead of hide():

$('.upper').addClass('hidden');

Check for conflicting CSS

Double-check your stylesheets for any rules with !important that might be overriding jQuery's display: none setting. For example:

/* This would prevent hide() from working */
.upper {
  display: block !important;
}

Adjust the selector priority or remove the !important flag to fix this.

内容的提问来源于stack exchange，提问作者hilda_sonica_vish