Вырвать абсолютно позиционированный элемент из его относительно позиционированного предка?

Предположим, у меня есть документ типа

<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, а не его непосредственного относительного контейнера?

Я знаю, что могу просто использовать отрицательное верхнее и левое, но это кажется неуклюжим - это мой единственный вариант?


css css-position positioning
person jemminger    schedule 01.02.2011    source источник

Ответы (2)


arrow_upward
5
arrow_downward

Для этого вы можете использовать немного javascript (я предполагаю, что вы не можете изменить разметку?).

document.body.appendChild(document.getElementById('i_want_to_be_absolute_to_body'));
person Sean    schedule 01.02.2011
comment
Я полагаю, что это наиболее правильно, мне также придется удалить старый элемент, чтобы не было двух элементов с одинаковым идентификатором: var el = document.getElementById('i_want_to_be_absolute_to_body'); el.parentNode.removeChild(el); document.body.appendChild (эль); - person jemminger; 02.02.2011
comment
Нет, это ломает вещи (проверено в IE8 и Chrome). Просто выполните appendChild, и узел будет перемещен в DOM. Я должен сделать это с SharePoint и другой CMS, которую использует клиент (по тем же причинам, что и вы, обычно я перемещаю элемент из одного контейнера в другой). - person Sean; 02.02.2011

arrow_upward
0
arrow_downward

Важно ли, чтобы Элемент «i_want_to_be_absolute_to_body» находился в Контейнере «i_am_relatively_positioned»?

Если нет, то это решение:

  <div id="i_am_relatively_positioned">
  <div id="inner">inner</div>
  </div>
  <div id="i_want_to_be_absolute_to_body">absolute to body</div>
person Chugworth    schedule 01.02.2011
comment
Из-за того, что документ строится во время рендеринга, переместить этот элемент в другое место непросто. - person jemminger; 02.02.2011