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，但它相对于整个视口而不是包含父视图。

Answer 1

你的意思是这样吗？

如果你在.sticky-bottom-right上使用position：absolute，那么它对于div来说绝对是位置：relative。

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

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>