絶対配置された要素のブートストラップ応答

Question

私はFlexboxをベースにしたブートストラップ4を使用しています。では、列またはそのサブディビジョンのいずれかを絶対的に配置するとどうなりますか？彼らは応答性に応答するかどうか？

例：

<div id="particles-js"> 
    <div class="container-fluid"> 
     <div class="row"> 
      <div class="col-sm-1"> 
       <img id="logo-small" src="img/logo-small.png" alt="logo"> 
      </div> 
      <div class="col-sm-2"> 
       <div id="navigation-buttons"> 
        <div class="nav-button"></div> 
        <div class="nav-button"></div> 
        <div class="nav-button"></div> 
        <div class="nav-button"></div> 
        <div class="nav-button"></div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

さて、私は絶対に＃ナビゲーション・ボタンを配置し、ブラウザのサイズが変更されたときの応答が動作しない場合。

CSS

#particles-js { 
     background-color: #252627; 
     height: 100vh; 
     position: relative; 
     width: 100%; 
    } 

    canvas { 
     display: block; 
    } 

    #logo-small { 
     position: absolute; 
     top: 50vh; 
    } 

    #navigation-buttons { 
     position: absolute; 
     top: 50vh; 
     width: 13px; 
     top: 50vh; 
     -webkit-transform: translate(0, -37%); 
    } 

PS：、あなたは位置は絶対作っている今、相対および任意の子、それが配置されます：＃粒子-jsがあなたの位置として親を作成する必要がキャンバス

Answer 1

です通常の場合のようにその親の位置に関して。 ポジションを絶対位置にするとポジションが変わるだけで、応答性とは何の関係もありません。これは、ブートストラップクラスを使用して他のコードがどのように動作するかのように動作します。

これを確認してください： http://jsfiddle.net/x1hphsvb/7/

HTML：

<div class="container"> 
    <div class="row"> 
    <div class="columns col-sm-4"> 
    First 
    </div> 
    <div class="columns col-sm-4"> 
    Second 
    </div> 
    <div class="columns col-sm-4 third"> 
    Third 
    <div class="container test"> 
     <div class="row"> 
     <div class="col-sm-4"> 
     Test1 
     </div> 
     <div class="col-sm-4"> 
     Test2 
     </div> 
     <div class="col-sm-4"> 
     Test3 
     </div> 
     </div> 
    </div> 
    </div>  
    </div> 
</div> 

CSS：相対的な親が利用できない場合

body { 
    margin: 10px; 
} 

.third{ 
    position:relative; 
} 

.test{ 
    position: absolute; 
    top:10px; 
    left:-15px; 
}