How to detect elements using "position: absolute"?

Question

I'm trying to position an element exactly in the same "X" coordinate of another element. There are many solutions in stackoverflow to get the position using something like this:

var rect = element.getBoundingClientRect();
console.log(rect.top, rect.right, rect.bottom, rect.left);

My problem is that when I try to apply the value on "element.style.left" of elements that are inside other elements positioned as "absolute", the element position becomes larger because the "left: 0" is the beginning of the absolute element and not "left: 0" of the document.

The more "nested" elements exist using "absolute", the greater the difference.

Is there any way to detect elements using "position: absolute" so that I can offset the actual value to be positioned by discounting the "left" of each element with "absolute"?

This is the problem:

  <span class="dropdown-label">Some menu</span>
  <nav class="dropdown-menu">
    <a class="item">Email</a>
    <a class="item">Twitter</a>
    <a class="item">Tumblr Blog</a>
    <span class="dropdown-label">Another menu</span>
    <nav class="dropdown-menu">
      <a class="item">Foo</a>
      <a class="item">Bar</a>
      <a class="item">I'm Batman</a>
      <span class="dropdown-label">Yet another menu</span>
      <nav id="finales" class="power-dropdown">
        <a class="item">Foo</a>
        <a class="item">Bar</a>
        <a class="item">I'm Robin</a>
      </nav>
    </nav>
  </nav>

Each dropdown needs to be positioned with the "lef" of its respective label, but we have dropdowns inside other dropdowns and each dropdown is positioned absolutely.

I know I can avoid the problem by using a "container" for each dropdown positioned as "relative" and so I do not need to dynamically set the "left" to anything.

The problem is that the HTML gets more verbose, which I'd like to avoid, plus I'd like to have control of how the dropdown appears to prevent it from being drawn off the screen.

But it seems like I've run into a problem that's impossible to solve, since I can not find anywhere a way to detect elements using "absolute" to be positioned.

Is there anything similar to "element.position" that gives me this information?

Possible duplicate of [How to get an HTML element's style values in javascript?](https://stackoverflow.com/questions/2664045/how-to-get-an-html-elements-style-values-in-javascript) — Dan O, Jan 15 '19 at 03:02
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetParent — misorude, Jan 15 '19 at 07:52
No, the element' s style values only shows values defined using the tag "style", it doesn't solve the problem to get the value defined using CSS. — Andre Maia, Jan 18 '19 at 21:27

score 2 · Accepted Answer · answered Jan 15 '19 at 04:06

You asked for a way to detect position: absolute on elements.

Use window.getComputedStyle(element).position.

function findAbsoluteElementsFromList(list){
  var ret = [];
  
  for (var i = 0; i < list.length; i++)
    if (window.getComputedStyle(list[i]).position === 'absolute')
      ret.push(list[i]);
      
  return ret;
}

console.log(findAbsoluteElementsFromList(document.querySelectorAll('div')));

.div {
  width: 100px;
  height: 100px;
  position: absolute;
  top: 0;
  transform: translateY(50%);
}
#a {
  position: relative;
  left: 0;
  background-color: #f00;
}
#b {
  left: 25px;
  background-color: #0f0;
}
#c {
  left: 50px;
  background-color: #00f;
}

<div class="div" id="a">
  <div class="div" id="b">
    <div class="div" id="c"></div>
  </div>
</div>

Same function can be used to get all other CSS values.

What's the difference between Window.getComputedStyle and Element.getBoundingClientRect()? Read here.

Why can't you just use element.style.position? Read here.

Thanks, this really solves my problem. This function is extremely useful and I have not found anyone talking about it. — Andre Maia, Jan 20 '19 at 19:52
Ok, that is a short/simple function but super usefull to find rogue absolute items!! I've used it with `document.querySelectorAll('*')` to query all elements — Mathieu de Lorimier, Mar 24 '23 at 18:29

How to detect elements using "position: absolute"?

1 Answers1