时间戳

首页 > 解决方案 > 位置：粘性仅适用于右侧

html - 位置：粘性仅适用于右侧

问题描述

我希望我的单元格贴在可滚动容器的左侧或右侧。如您所见，尽管left: 0px.

我怎样才能让它粘在两者上，就像你一直向右滚动一样，单元格应该被卡在左侧？像这样：https ://stackblitz.com/edit/react-rgukbo?file=app/main.jsx

编辑：似乎如果我direction: ltr/rtl在容器上进行更改，它会粘在一个或另一个上，但不是两者兼而有之

.container {
  width: 300px;
  height: 100px;
  overflow: auto;
}

.grid {
  display: grid;
  grid-template-columns: 200px 200px 80px 200px 200px 200px;
}

.cell {
  padding: 10px;
  border: 1px solid black;
  background: white;
}

.sticky {
  position: sticky;
  left: 0px;
  right: 0px;
  z-index: 1;
  background: yellow;
}
<div class="container">
  <div class="grid">
    <div class="cell">1</div>
    <div class="cell">2</div>
    <div class="cell sticky">3</div>
    <div class="cell">4</div>
    <div class="cell">5</div>
    <div class="cell">6</div>
  </div>
</div>

标签： htmlcss

解决方案

我可以通过更改grid为inline-grid‍♂️ 来使其正常工作</p> 

.container {
  width: 300px;
  height: 100px;
  overflow: auto;
}

.grid {
  display: inline-grid;
  grid-template-columns: 200px 200px 80px 200px 200px 200px;
}

.cell {
  padding: 10px;
  border: 1px solid black;
  background: white;
}

.sticky {
  position: sticky;
  left: 0px;
  right: 0px;
  z-index: 1;
  background: yellow;
}
<div class="container">
  <div class="grid">
    <div class="cell">1</div>
    <div class="cell">2</div>
    <div class="cell sticky">3</div>
    <div class="cell">4</div>
    <div class="cell">5</div>
    <div class="cell">6</div>
  </div>
</div>

推荐阅读