position: sticky 固定两列

要将两列固定在页面上，您可以使用position: sticky属性。这个属性可以将元素固定在其父元素内，但只在滚动到特定位置时才生效。

首先，您需要创建包含两列的父容器。然后，为每个列添加相应的样式。

HTML结构示例：

<div class="container">
  <div class="column1">Column 1</div>
  <div class="column2">Column 2</div>
</div>

CSS样式示例：

.container {
  display: flex;
}

.column1 {
  width: 200px;
  height: 100vh; /* 设置高度，确保内容可以滚动 */
  position: sticky;
  top: 0; /* 在顶部固定 */
}

.column2 {
  width: 300px;
  height: 100vh; /* 设置高度，确保内容可以滚动 */
  position: sticky;
  top: 0; /* 在顶部固定 */
}

这样，当您滚动页面时，两列将保持固定在顶部。您可以根据需要调整列的宽度、高度和其他样式。

相关问题

position: sticky 表格 固定两列不滚动

要在表格中固定两列并使其不滚动，您可以使用position: sticky属性和一些CSS样式。以下是一个示例：

HTML结构示例：

<div class="table-container">
  <table>
    <thead>
      <tr>
        <th>固定列1</th>
        <th>固定列2</th>
        <th>其他列1</th>
        <th>其他列2</th>
        <!-- 其他表头列 -->
      </tr>
    </thead>
    <tbody>
      <!-- 表格内容行 -->
    </tbody>
  </table>
</div>

CSS样式示例：

.table-container {
  width: 100%;
  overflow-x: auto;
}

table {
  width: max-content;
  table-layout: fixed;
}

th:first-child,
td:first-child {
  position: sticky;
  left: 0;
  background-color: white;
}

th:nth-child(2),
td:nth-child(2) {
  position: sticky;
  left: 100px; /* 调整固定列的宽度 */
  background-color: white;
}

首先，将表格放在一个包含overflow-x: auto样式的容器中，这样当内容超出容器宽度时，可以出现水平滚动条。

然后，使用position: sticky和left属性来将第一列和第二列固定在左侧。您可以通过调整left值来控制固定列的宽度。

注意：这种方法在大多数现代浏览器中都能正常工作，但在某些旧版本的浏览器中可能不起作用。

position: sticky 解释一下

`position: sticky` 是 CSS 中的一个定位属性，它允许元素在滚动页面时保持部分定位，类似于元素被“粘”在了视口的某个位置上。当满足特定条件时，元素会脱离标准文档流，但仍然保持相对于其原始位置的相对位置，直到遇到另一个 `position: sticky` 元素或文档边缘。

以下是 `position: sticky` 的主要特点：
1. **顶部 sticky**: 当设置了 `top: sticky` 时，元素会在滚动到其 `top` 值所指定的位置（通常为 `0` 或者 `sticky-top` 类似值）时开始“粘”住，直到文档顶部。
2. **底部 sticky**: 同理，`bottom: sticky` 会让元素在滚动到底部时固定。
3. **侧边 sticky**: 可以使用 `left` 和 `right` 属性进行水平定位，元素会沿着相应的边固定。

**使用场景**：
- 导航栏：可以让导航栏在滚动页面时保持可见，当用户滚动内容时，导航栏在顶部固定。
- 侧边广告或信息区域：在滚动时保持在屏幕的一侧，提供连续的内容或信息。

**注意事项**：
- `position: sticky` 不兼容所有的浏览器，一些旧版浏览器可能不支持。
- 当父元素没有设置 `position: relative`, `absolute`, `fixed` 或者 `sticky` 时，`position: sticky` 的效果可能会受到影响。
- 如果没有指定其他 `position` 值，元素会继承其最近的已定位祖先元素的 `position`。