Jak mogę zmienić element nadrzędny odsunięcia bezwzględnie umieszczonego elementu CSS?

Question

Domyślnie element HTML, którego pozycja jest ustawiona na "bezwzględny", zostanie umieszczony względem okna podglądu przeglądarki.

Ale jeśli jeden z przodków elementu jest ustawiony na pozycję niestatyczną, element zostanie umieszczony względem tego przodka. Ten przodek jest "rodzicem offsetowym" elementu.

Problem: chcę pozycjonować bezwzględnie element względem rzutni, ale niestety jeden z jego przodków jest względnie pozycjonowany, więc został jego rodzicem odsuniętym. Ponieważ modyfikuję temat innej firmy, nie mogę go przenieść ani usunąć względnego położenia jego przodka.

Używając CSS lub JavaScript, czy mogę w efekcie ustawić lub zresetować element macierzysty offsetu elementu? Rozumiem, że właściwość DOM [element] .offsetParent jest tylko do odczytu, ale czy istnieje jakiś sposób pośredniego wywołania jej ustawienia?

Answer 1

Możesz użyć Javascript, aby przesunąć element. Oto rozwiązanie jQuery z funkcją prependTo(), można również użyć appendTo().

http://jsfiddle.net/6557cnew/

$(function() { 
 
    $('.absolute').prependTo('body'); 
 
});

.relative { 
 
    position: relative; 
 
    left: 50px; 
 
    top: 50px; 
 
    border: 1px solid blue; 
 
    width: 100px; 
 
    height: 100px; 
 
} 
 
.absolute { 
 
    position: absolute; 
 
    border: 1px solid red; 
 
    left: 0; 
 
    top: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<div class="relative"> 
 
    relative 
 
    <div class="absolute"> 
 
     absolute 
 
    </div> 
 
</div>

Answer 2

Właściwość CSS position: fixed używa rzutni zamiast przodka. Jednak podczas przewijania jest on ustalany na ekranie, więc może to być problem.

Answer 3

Możesz użyć wartości offsetu nadrzędnego, aby przenieść dziecko - po prostu obliczyć wartość dziecka na podstawie renderowanych współrzędnych rodzica względem okna.