忽略所有相對定位的父div div arround絕對定位div？

Question

我知道這是不可能的與CSS，但我試圖找到一些jQuery解決方案，迄今沒有運氣與堆棧上的答案。

無論如何，HTML爲了看起來是這樣的，它需要保持這樣的：

<div class="wrapper"> 
    <div style="position:relative;"> 
    <div style="position:relative;"> 
     <div class="dont-want-parents" style="position:absolute;"> 
     </div> 
    </div> 
    </div> 
</div> 

所以，問題是如何定位分度類「不要想學的父母」的右下方的包裝div，忽略所有相對定位的父母。

謝謝大家誰試圖幫助，最後我想出了一個解決方案：

$(window).on("load resize",function(e){ 
    var parentoffset = $('.dont-want-parents').parent(); 
    var elwidth = $('.dont-want-parents').width(); 
    var offset = parentoffset.offset(); 
    $('.dont-want-parents').css('right', -offset.left + elwidth); 
}); 

這裏的工作fiddle

Answer 1

一個你可以將它們全部恢復static，這樣一個與absolute忽略它們。此外，還需要top和left，因爲position:absolute只會從佈局中移除元素，但不會從原始位置移除元素。

$('.wrapper > div, .wrapper > div > div').css('position', 'static');

div{ 
 
    padding: 50px; 
 
    background: rgba(255, 0, 0, 0.5); 
 
} 
 

 
.wrapper{ 
 
    position: relative; 
 
    background: green; 
 
} 
 

 
.dont-want-parents{ 
 
    background: blue; 
 
    top: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="wrapper"> 
 
    <div style="position:relative;"> 
 
    <div style="position:relative;"> 
 
     <div class="dont-want-parents" style="position:absolute;"> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

另一種方法是隻抽出了不管它是元素，並把它的地方，安全是絕對的。

$('.dont-want-parents').appendTo('.wrapper');

div{ 
 
    padding: 50px; 
 
    background: rgba(255, 0, 0, 0.5); 
 
} 
 

 
.wrapper{ 
 
    position: relative; 
 
    background: green; 
 
} 
 

 
.dont-want-parents{ 
 
    background: blue; 
 
    top: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="wrapper"> 
 
    <div style="position:relative;"> 
 
    <div style="position:relative;"> 
 
     <div class="dont-want-parents" style="position:absolute;"> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>