CODEWITHSUNDEEP
javascriptjquerycss
nainy
nainy

Reputation: 540

Determine nearest element with a z-index?

Is there a proper way of determining if an element (any element) closest to the targetted element has a z-index?

For example, I append a div to a layer of DOM and I want to know if there's an element near that div with a z-index so i can position that div accordingly so it won't get lost under the layers because I don't know where and when it would be appended.

Thanks!

EDIT:

I have a hint plugin that appends hints to a page dynamically and then saves them on a server. I'd post the code but i'm afraid it won't be of much relevance to my question.

Upvotes: 4

Views: 945

Answers (3)

prdatur
prdatur

Reputation: 1007

My is a similar solution as the one from 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 solution was added within an object class. this.element is the starting point from where it searchs. It stops when we found an element with z-index not really a one with a numeric value, because z-index can also be set to "auto". If we reached the body we break the chain and set it to 2 by default as a fallback.

Hope this helps others.

Upvotes: 0

Sethunath K M
Sethunath K M

Reputation: 4761

I would crate a function like the below one. It traverses through each of the element's parents and checks if it has a 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;

    }

Upvotes: 2

MCSharp
MCSharp

Reputation: 1068

You can use Firefox firebug https://getfirebug.com/ or Chrome Developer Tools (built in Chrome) to inspect the element you'd like to find the z-index of.

Appending the element near another div isn't related to the z-index property. The z-index will bring the highest number element in front when objects overlap. Otherwise, it is not the property you are looking for. Especially if you didn't define any z-index properties for other elements.

CSS specificity is what you might be looking for here

Upvotes: -1

Related Questions