Twitter bootstrap 绝对定位元素的引导响应性

我使用的是基于Flexbox的Bootstrap4。现在，如果我完全定位其中一列或其子节，会发生什么？他们是否会对响应作出反应

例如：

<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>

---

附言：#particles js是一张画布

您需要将父对象设置为位置：相对，现在任何子对象，您都将位置设置为绝对位置，它将按照其父对象位置进行放置，就像在正常情况下一样。 拥有绝对位置只会改变位置，与反应能力无关。它的行为与使用引导类的其他代码的行为相同

请检查以下内容：

HTML:

---

您需要将父对象设置为位置：相对，现在任何子对象都将设置为绝对位置，它将像正常情况下一样相对于父对象位置放置。 拥有绝对位置只会改变位置，与反应能力无关。它的行为与使用引导类的其他代码的行为相同

请检查以下内容：

HTML:

---

如果相对父元素不可用，则绝对位置元素跟随其相对父元素或主体。使用引导程序无法使其响应，您需要使用媒体查询更改绝对定位元素的属性以使其响应。@Niraj谢谢。所以，如果我将一个列设为相对列，并将其子曲面设为绝对列，那么在调整大小时会发生什么情况？如果你有时间做一个密码笔，我将不胜感激！再次感谢您的回复。若列具有相对属性，您的细分将位于列内。您可以观看前两段视频，以便更好地了解您制作的代码笔，我将根据您的需要帮助您进行更新。@Niraj Nitesh做了一把小提琴，但非常感谢Niraj的回答。我看了视频，是的，我对绝对位置的理解是错误的。如果相对父元素不可用，绝对位置元素将跟随其相对父元素或身体。它们不能使用引导使其响应，您需要使用媒体查询来更改绝对定位元素的属性，以使其响应。@Niraj谢谢。所以，如果我将一个列设为相对列，并将其子曲面设为绝对列，那么在调整大小时会发生什么情况？如果你有时间做一个密码笔，我将不胜感激！再次感谢您的回复。若列具有相对属性，您的细分将位于列内。您可以观看前两段视频，以便更好地了解您制作的代码笔，我将根据您的需要帮助您进行更新。@Niraj Nitesh做了一把小提琴，但非常感谢Niraj的回答。我看了视频，是的，我对绝对位置的看法是错误的。非常感谢你。这正是我想知道的。实际上，我很困惑，认为绝对元素总是根据文档的顶部定位的，不管父元素是否是相对的。最后要问的一件事：我应该避免使列绝对正确吗？因为如果一列是绝对的，而另一列不是绝对的，布局就会混乱？这取决于，如果你需要一个特定的部分，应该放在页面的任何地方，那么使用绝对位置进行布局是没有坏处的。我会说，bootstrap与使任何元素成为绝对或相对无关，它只是一般的CSS概念。非常感谢你。这正是我想知道的。实际上，我很困惑，认为绝对元素总是根据文档的顶部定位的，不管父元素是否是相对的。最后要问的一件事：我应该避免使列绝对正确吗？因为如果一列是绝对的，而另一列不是绝对的，布局就会混乱？这取决于，如果你需要一个特定的部分，应该放在页面的任何地方，那么使用绝对位置进行布局是没有坏处的。我会说，bootstrap与使任何元素成为绝对或相对元素无关，它只是一般的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%);
    }

<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>

  body {
    margin: 10px;
}

.third{
  position:relative;
}

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