Question

是否有正确的方法来确定最接近目标元素的元素（任何元素）是否具有z-index？

例如，我将一个div附加到一个DOM层，我想知道该div附近是否有一个带有z-index的元素，所以我可以相应地定位该div，这样它就不会在图层下丢失，因为我不知道它会在何时何地附上。

谢谢！

编辑：

我有一个提示插件，可以动态地向页面添加提示，然后将它们保存在服务器上。我会发布代码，但我担心这与我的问题无关。

Answer 1

我会创建一个类似下面的函数。它遍历每个元素的父元素并检查它是否具有z-index

    function getElement($target){
       var $parents = $target.parents();
       for(var i=0;i<$parents.length;i++){
          if($parents[i].css('z-index').length>0){
              return $parents[i];
          }
       }
       return false;

    }

Answer 2

我的解决方案与Sethunath的解决方案类似。

/**
 * Helper to retrieve the z-index which is required to bring up the dragged element in front.
 * @returns {undefined}
 */
getZIndex: function () {
    if (this.z_index === undefined) {

        var recrusive_z_index_search = function(element) {

            // Break on body.
            if (element[0] === $('body')[0]) {
                return 2;
            }

            // Get parent element
            var parent = $(element).parent();

            // Check if parent has z-index
            var z_index = parent.css('z-index');
            if (z_index.length > 0 && !(/\D/).test(z_index)) {

                // Return found z-index.
                return z_index;
            }

            // Z-index not found, try again on next parent.
            return recrusive_z_index_search(parent);
        };

        this.z_index = recrusive_z_index_search($(this.element));

    }
    return this.z_index;
},

此解决方案已添加到对象类中。 this.element是搜索的起点。当我们发现具有z-index的元素实际上不是具有数值的元素时，它会停止，因为z-index也可以设置为“auto”。如果我们到达了正文，我们会破坏链并将其默认设置为2作为后备。

希望这有助于其他人。

Answer 3

您可以使用Firefox firebug https://getfirebug.com/或Chrome Developer Tools（内置Chrome）来inspect the element找到您的z-index。

将元素附加到另一个div附近与z-index属性无关。当对象重叠时，z-index将带来前面最高的数字元素。否则，它不是您要寻找的财产。特别是如果您没有为其他元素定义任何z-index属性。

您可能正在寻找CSS特异性here

用z-index确定最近的元素？

3 个答案: