您可以重置 CSS 元素以引用相对元素中的绝对零吗

Question

这是一个相当随机的问题。我使用 CSS3Pie 来处理 IE 中的 CSS3 兼容性，但遇到了障碍。在很多情况下，对于 PIE，您需要使用position:relative 才能使其在 IE 中正常工作。

当我在包含包装器上使用它时，这成为一个问题，因为它随后会在布局内部的零引用中移动。我们用于在网站上绘制地图的软件使用浏览器左上角的绝对位置作为计算定位的参考点。理想情况下，我们的软件会更加灵活，不依赖于这样的绝对位置，但这可能不会很快改变。

那么回到我的问题，是否有可能以某种方式将元素从布局流中取出并引用回原始的 0,0 左上角位置，同时包含在相对定位的对象中？我认为也许 z-index 可能有效，但它不会使元素引用回绝对值 0,0。

最简单的解决方法是不对我的包装器应用 PIE，但这也会从我的布局包装器中删除圆角和阴影。这不是世界末日，但理想情况下我想找到一个解决方案。

Answer 1

好问题：我认为如果没有 js，这可能是不可能的。

这是一个 jQuery 解决方法： http://jsfiddle.net/SebastianPataneMasuelli/hSh25/

它采用左侧和相对定位元素的顶部值，并从绝对值中减去它们，实际上将绝对值返回到原点。

因此，鉴于

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

此计算如何在添加定位 div 的左侧值和顶部值之前返回到 0。

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);

你必须在你的实际站点中获得更具体的信息（我想那里有一堆相对定位的 div）。请告诉我它是否是 CSS3PIE 的可行解决方案，因为我计划很快在项目中使用它。

注意： JavaScript 不是我的强项，我怀疑有一种更优雅的方式来编写上面的语句。

Answer 2

$(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
});

这是对 Wilson Page 代码的一点改进。到目前为止仅在 localhost 上进行了测试，但它确实成功了。在启用 IE6/7/8 + CSS3PIE 的情况下进行测试。

想要将其放在公共网络服务器上，但事实证明他们没有启用 *.htc 支持，并且当与 PIE.php （提供的脚本）一起使用时PIE）——它不起作用。

稍后当我回到办公室并开始推动系统管理员在服务器上启用 *.htc 支持时，我将进行更多测试。 呵呵

而且，我全面测试了Sebastian Patane Masue的脚本，它成功了！ +1@塞巴斯蒂安。

PS“完全”是指启用 CSS3PIE 并将属性添加到实际样式中。

编辑：刚刚再尝试一次，结果非常烦人。它在本地主机上完美运行，但在远程查看时却遇到了很大的问题。不知道是什么原因造成的...

Answer 3

我认为 JS/jQuery 是必需的：

尝试类似的方法：

var el = $('#element');

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

希望这是一个可以接受的修复，

W.