css - 在 div 容器内固定位置 div

Question

我正在尝试在相关容器内创建固定位置的 div。我正在使用 bootstrap css 框架。我正在尝试创建一个固定位置的购物车。因此，每当用户滚动页面时，它都会显示购物车内容。但现在的问题是，它跑到了那个容器 div 之外。

这必须在响应模式下工作。

这是我的尝试:

.wrapper {
  width: 100%
}

.container {
  width: 300px;
  margin: 0 auto;
  height: 500px;
  background: #ccc;
}

.element {
  background: #f2f2f2;
  position: fixed;
  width: 50px;
  height: 70px;
  top: 50px;
  right: 0px;
  border: 1px solid #d6d6d6;
}

<div class="wrapper">
  <div class="container">
    <div class="element">
      fixed
    </div>
  </div>
</div>

Answer 1

截图:

这就是 position: fixed; 的行为方式:

MDN link

Do not leave space for the element. Instead, position it at aspecified position relative to the screen's viewport and doesn't movewhen scrolled. When printing, position it at that fixed position onevery page.

因此，要获得您想要的东西，您必须使用比固定定位更多的东西:

大概是这样的:

.wrapper {
  width: 100%
}

.container {
  width: 300px;
  margin: 0 auto;
  height: 500px;
  background: #ccc;
}

.element {
  background: #f2f2f2;
  position: fixed;
  width: 50px;
  height: 70px;
  margin-left: 250px;
  border: 0px solid #d6d6d6;
}

<div class="wrapper">
  <div class="container">
    <div class="element">
      fixed
    </div>
  </div>
</div>