對齊絕對定位的孩子一過隱相對父

Question

我有這樣的代碼：

<div id="main_wrapper" style="width: 80vw; overflow: hidden;"> 
    <div id="inner_wrapper" style="position: relative;"> 
     <div id="red" style="background-color: red;width: 20vw;height: 100px;position: absolute;left: 80vw;"></div> 

     <div id="blue" style="background-color:blue; height:100px; margin: 0px 1% 0px 1%;"></div> 
    </div> 
</div> 

這裏是JS-小提琴：https://jsfiddle.net/omriman12/msrpwnym/1/

基本上main_wrapper過隱藏的inner_wrapper，和我想要什麼要做的是將red對齊到blue元素的右側。

我的問題是red當我使用親戚時會被隱藏起來。

我必須保持它的相對！這是問題的一部分，不要改變結構！

這裏是我究竟試圖創建：

Answer 1

試試這個。問題是您將#main_wrapper設置爲width: 80vw和overflow-x: hidden。如果那些孩子比80vw更寬，則會導致任何孩子被隱藏。您必須寬#main_wrapper至100vw並將寬度#inner_wrapper設置爲80vw用於顯示#main_wrapper的孩子。

順便說一句，你需要動態調整#main_wrapper的寬度，當每行被點擊下面的代碼片段時。

$('.row').click(function() { 
 
    $(this).toggleClass('selected'); 
 
    if($(this).hasClass('selected')) { 
 
    $('#main_wrapper').width('100vw'); 
 
    } else { 
 
    $('#main_wrapper').width('80vw'); 
 
    } 
 
});

#main_wrapper{ 
 
    width: 80vw; 
 
    overflow-y: scroll; 
 
    overflow-x:hidden; 
 
} 
 

 
#inner_wrapper{ 
 
    position: relative; 
 
    width: 80vw; 
 
} 
 

 
#blue{ 
 
    background-color:blue; 
 
    height:100px; 
 
    margin: 0px 1% 0px 1%; 
 
} 
 

 
#red{ 
 
    background-color: red; 
 
    width: 20vw; 
 
    height: 100px; 
 
    position: absolute; 
 
    left: 80vw; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="main_wrapper"> 
 
    <div id="inner_wrapper" class="row"> 
 
    <div id="red" ></div> 
 
    <div id="blue"></div> 
 
    </div> 
 
</div>