将绝对定位的元素从其相对定位的祖先中分离出来? [英] Break an absolutely positioned element out of its relatively positioned ancestor?

查看:78
本文介绍了将绝对定位的元素从其相对定位的祖先中分离出来?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

假设我有一个文档

<style type="text/css">
div {
  border:1px solid;
  padding:15px;
}

#i_am_relatively_positioned{
  background-color:#fcc;
  margin:50px;
  padding:50px;
  position:relative;
}

#inner {
  background-color:#cfc;
}

#i_want_to_be_absolute_to_body{
  background-color:#ccf;
  left:0;
  position:absolute;
  top:0;
}
</style>

<body>
  <div id="i_am_relatively_positioned">
    <div id="inner">inner</div>
    <div id="i_want_to_be_absolute_to_body">absolute to body</div>
  </div>
</body>

是否有办法使#i_want_to_be_absolute_to_body相对于body元素(而不是其直接相对容器)绝对定位?

Is there a way to make #i_want_to_be_absolute_to_body positioned absolute with respect to the body element, rather than its immediate relative container?

我知道我只能用一些负数上下,但这似乎很笨拙-这是我唯一的选择吗?

I know I can just use some negative top and left but that seems kludgey - is this my only option?

推荐答案

您可以使用一些javascript来做到这一点(我假设您无法更改标记?).

You can use a bit of javascript to do this (I'm assuming you can't change the markup?).

document.body.appendChild(document.getElementById('i_want_to_be_absolute_to_body'));

这篇关于将绝对定位的元素从其相对定位的祖先中分离出来?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆