CSS:想要位置:粘性以将元素放置在其父容器的底部/右侧

Question

请看这个jsfiddle .

我想要 <div>与 innerText “嗨!”始终出现在其包含父级的可见部分的底部/右侧。它不应与其父级的内容一起滚动。

HTML:

<table>
  <thead>
    <tr>
      <th style="width: 90%">Header 1</th>
      <th style="width: 10%">Header 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <div id="flex-div">
          <div class="flex-item">1</div>
          <div class="flex-item">2</div>
          <div class="flex-item">3</div>
          <div class="sticky-bottom-right">Hi!</div>
        </div>
      </td>
      <td>more</td>
    </tr>
  </tbody>
</table>

CSS:

table {
  table-layout: fixed;
  width: 100%;
}
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}

#flex-div {
  display: flex;
  justify-content: space-between;
  overflow: auto;
  positiom: relative;
}

.flex-item {
  background-color: beige;
  border: 1px solid blue;
  height: 100px;
  padding: 30 px;
  text-align: center;
  min-width: 200px;
}
.sticky-bottom-right {
  font-weight: bold;
  position: sticky;
  right: 0;
}

我试过 position: fixed，但它是相对于整个视口(viewport)而不是包含父级的。

Answer 1

你的意思是这样的吗？

如果你在 .sticky-bottom-right 上使用 position: absolute ，它对于它所在的 div 将是绝对的，并且 position: relative。

你也有一个错字，positiom 而不是 position。

table {
  table-layout: fixed;
  width: 100%;
}
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}

#flex-div {
  display: flex;
  justify-content: space-between;
  overflow: auto;
  position: relative;
}

.flex-item {
  background-color: beige;
  border: 1px solid blue;
  height: 100px;
  padding: 30 px;
  text-align: center;
  min-width: 200px;
}
.sticky-bottom-right {
  font-weight: bold;
  position: absolute;
  right: 0;
  bottom: 0;
}

<table>
<thead>
<tr>
  <th style="width: 90%">Header 1</th>
  <th style="width: 10%">Header 2</th>
</tr>
</thead>
<tbody>
  <tr>
    <td>
      <div id="flex-div">
        <div class="flex-item">1</div>
        <div class="flex-item">2</div>
        <div class="flex-item">3</div>
        <div class="sticky-bottom-right">Hi!
        </div>
        </div>
      </div>
    </td>
    <td>more</td>
  </tr>
</tbody>
</table>