css-element-queries

css-element-queries copied to clipboard

First off, thanks for the great work you have given to the community.

Sample

<div id="masterKontainer" style="position:relative"> <div id="Kontainer" style="z-index:10;position:absolute;top:0;left:0;background-color:transparent;border:solid;border-color:yellow;"> </div> <div id="Kontainer2">stuff</div> </div>

In the sample above I apply ResizeSensor to element Kontainer. Without ResizeSensor the div floats above the Kontainer2. When ResizeSensor is applied, it changes the layout and moves Kontainer2 from behind Kontainer. You get the idea, my code is much more complex than above, but that was just for example.

After looking at the source, I found that everything is just fine until here

        var position = window.getComputedStyle(element).getPropertyPriority('position');
        if ('absolute' !== position && 'relative' !== position && 'fixed' !== position) {
            element.style.position = 'relative';
        }

Where the element position is changed to 'relative'. If i comment out this line it works fine. What is the purpose of this? Should I find another workaround?

The sensor works only in an element that is not statically positioned, means either absolute, relative or fixed. The actual sensor elements (which are simple divs) need to maintain the exact same dimensions as the actual element, which works only with non statically positioned elements, so the offset of our sensor elements is the actual element you want to monitor. There no way around that.