打破一个绝对定位的元素出自其相对位置的祖先？

本文介绍了打破一个绝对定位的元素出自其相对位置的祖先？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

假设我有一个文档

 < 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>绝对身体< / div> 
< / div> 
< / body>

有没有办法使#i_want_to_be_absolute_to_body相对于body元素绝对定位，而不是立即相对容器？

 
 
 我知道我可以使用一些负面的顶部和左边，但这似乎kludgey  - 这是我唯一的选择吗？
  document.body.appendChild（document.getElementById（'i_want_to_be_absolute_to_body'））; 
  
 
Suppose I have a document like 
<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>
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?
 解决方案 
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'));
                        
这篇关于打破一个绝对定位的元素出自其相对位置的祖先？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！