Can you reset a CSS element to refer to absolute zero within a relative element

This is a rather random problem. I'm using CSS3Pie to handle CSS3 compatibility in IE, but I've run into a snag. With PIE in a lot of cases you need to use position:relative for it to work properly in IE.

This becomes an issue when I use it on containing wrappers, as it then moves in the zero reference inside of the layout. The software we use for mapping on our sites uses an absolute position of the top left corner of the browser as its point of reference for calculating positioning. Ideally our software would be more flexible and not reliant on an absolute position like that, but that's probably not going to change anytime soon.

So getting to my question, is it possible to somehow take an element out of the flow of the layout and refer back to the original 0,0 top left position while being contained within a relatively positioned object? I thought maybe z-index might work, but it doesn't make the element refer back to absolute 0,0.

The most simple workaround is to not apply PIE to my wrappers, but then that also removes rounded corners and dropshadows from my layout wrapper. That isn't the end of the world, but ideally 开发者_开发知识库I'd like to come up with a solution.

I think JS/jQuery is required for this:

try something like:

var el = $('#element');

$('body').append(el);
el.remove();

Hope this is an acceptable fix,

W.

Great Question: i think it might be impossible without js.

this is a jQuery workaround: http://jsfiddle.net/SebastianPataneMasuelli/hSh25/

it takes the left and top values of the relatively positioned element and subtracts them from the absolute one, in effect returing the absolute one to the origin point.

so, given

<div id="relative">
relative
  <div id="absolute">
     absolute;
 </div>

this calculates how to get back to 0 before adding left and top values for the positioned div.

var relativeLeft = $('#relative').css('left');
var absoluteLeft =  $('#absolute').css('left');
var returnToOriginLeft = (parseInt(absoluteLeft) - parseInt(relativeLeft)) + 'px';
var relativeTop = $('#relative').css('top');
var absoluteTop =  $('#absolute').css('top');
var returnToOriginTop = (parseInt(absoluteTop) - parseInt(relativeTop)) + 'px';
$('#absolute').css('left', returnToOriginLeft);
$('#absolute').css('top', returnToOriginTop);

you'll have to get more specific in your actual site (i imagine there's a bunch of relatively positioned divs there).Please let me know if its a workable solution for CSS3PIE, as i plan to use it myself in a project soon.

note: Javascript is not my strong point, i suspect that there is a more elegant way of writing the statement above.

$(document).ready(function() {
    var el = $('#absolute'); // element we want to work with
    el.clone().appendTo('body'); // clone and append to body
    el.remove(); // remove element
});

This is a little improvement of Wilson Page's code. Tested so far only on localhost, but it did the trick. Tested with IE6/7/8 + CSS3PIE enabled.

Wanted to put this up on public webserver, but it turns out they haven't enabled *.htc support, and when using it with PIE.php (the script provided with PIE) — it didn't work.

Will do some more testing later on when I get back to office and start pushing system admins to enable *.htc support on server. hehe

And, I fully tested Sebastian Patane Masue's script, it did the job! +1 @ Sebastian.

P.S. With fully I mean with CSS3PIE enabled and properties added to actual style.

EDIT: Just gave this a one more try, and the results are pretty annoying. It works on localhost flawlessly, but is pretty bugged when viewing it remotely. Have no idea what is causing that...