html - 动态情况下的元素定位修复

Question

我正在使用 Bootstrap，我希望红色背景的右上角始终位于可见部分蓝色部分的右上角，无论窗口如何调整大小，因为它是响应式的。

红色应该是固定的，因为它不应该通过滚动来移动，但应该始终位于可见蓝色背景部分的右上角。

如图应该是这样的： 如果我滚动（我现在用windowspaint做了）

请检查链接或查看以下代码：

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}

.left {
  background-color: blue;
  width: 100%;
  height: 4000px;
}

.right {
  background-color: red;
  width: 100%;
  position: fixed;
  right: 18%;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-11 left">left

    </div>
    <div class="col-1 right">right
    </div>
  </div>
</div>

标签： htmlcssbootstrap-4css-position

Answer 1

您正在寻找position: sticky这种情况。要完成这项工作，您需要做一些事情：

1. position: relative在元素的父级上设置（.row在本例中为 ）
2. top在粘性元素上设置一个值。这是必需的，因此当元素切换到粘性时，它知道将其放置在哪里。
3. 我为元素添加了另一个类.right，因为 Bootstrap 的col类更具体。.sticky向该元素添加类，确保应用了位置属性。

.row {
  background: #f8f9fa;
  margin-top: 20px;
  align-items: flex-start;
  position: relative;
}


.left {
  background-color: blue;
  width: 100%;
  height: 4000px;
}

.right.sticky {
  background-color: red;
  width: 100%;
  position: sticky;
  right: 18%;
  top: 0;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-11 left">left

    </div>
    <div class="col-1 right sticky">right
    </div>
  </div>
</div>