Position an html element at any x/y coordinate in a page

Question

Given X and Y coordinates, I want to position an element so it's in that position on screen/window.

I want scroll to work as normal, so position fixed isn't a solution. I want what fixed does but the element should move like a normal element when scrolling.

There are no guarantees what the parent html element position will be anything. That is it can be static, relative, absolute or fixed).

I understand css only solution is not possible and that's OK.

Answer 1

The equivalent of fixed positioning but with scroll is position: absolute. It is relative to the parent position, as long as that doesn't have static positioning.

In the CSS:

#yourElement {
    position: absolute;
}

And in JavaScript with x and y values:

var element = document.getElementById("yourElement");
element.style.left = x + "px";
element.style.top = y + "px";

Answer 2

Since this one is still open, got bored with JS Fiddle... Not sure if i meet the requirements of what you wanted?

http://jsfiddle.net/9Lz58n3o/

Example Page

<div> 
    using this div as an example of large text / body contents... can be ignored        
</div>
<div class="myStaticPos" tmpleft="32" tmptop="32" style="left:32px; top:32px;"></div>
<div class="myStaticPos" tmpleft="123" tmptop="123" style="left:123px; top:123px;"></div>

CSS

.myStaticPos {
    position:absolute; 
    background-color:#d00; 
    width:32px; 
    height:32px;
}

Javascript

$(function() {
  $(window).scroll(function() {
      alignElements();
  });
});

function alignElements() {
    var scrollTop = $(window).scrollTop();
     $( ".myStaticPos" ).each(function() {
         $(this).offset({ top: scrollTop + parseInt($(this).attr("tmptop")), left: parseInt($(this).attr("tmpleft")) });       
    });    
}

This above example and in the fiddle link is one way of using a elements offset to have it always appear regardless of scrolling.. Otherwise a position absolute is a position absolute..

If this does not suite your needs or cant be adjusted, then please verify the question a little more.