絕對定位元素的自舉響應

Question

我正在使用基於Flexbox的Bootstrap 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; 
}