小编Jef*_*ews的帖子

请参阅这个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; …

我一直在努力让 favicon 工作。最后，我根据上一个问题的答案使用 Base64 版本使其工作： 本地（文件：//）网站图标在 Firefox 中工作，而不是在 Chrome 或 Safari 中工作 - 为什么？

现在，我想将书签保存到手机的主屏幕，但手机使用的图标不是网站图标。相反，它只是一个带有字母“S”（我的应用程序标题的第一个字母）的黑盒子。我确定这是默认设置。

我见过为各种设备生成各种图标的图标生成器，例如这个生成器：https : //www.favicon-generator.org/

生成器创建了很多文件。Base64 字符串很长。为每个设备的每个图标文件重复所有这些会导致一个又大又丑的 html 标题。

有没有一种简短的方法可以让它发挥作用？第一个<link>是我的 favicon.ico。如果我在正确的轨道上，我需要处理<links>下面评论的所有其余部分。

<link href="data:image/x-icon;base64,AAABAAEAEBAAAAEAIABoBAAAFgAAACgAAAAQAAAAIAAAAAEAIAAAAAAAAAQAABILAAASCwAAAAAA
AAAAAABxbGj/cWxo/3FsaP9xbGj/cWxo/3FsaP9xbGj/cWxo/3FsaP9xbGj/cWxo/3FsaP9xbGj/
cWxo/3FsaP9xbGj/ODIr/zgyK/84Miv/ODIr/zgyK/84Miv/ODIr/zgyLP84Miz/ODIr/zgyK/84
Miv/ODIr/zgyK/84Miv/ODIr/0I8Nv9CPDb/Qjw2/0I8Nv9CPDb/QTs3/0E7OP9BOzf/QTs4/0E7
Of9CPDb/Qjw2/0I8Nv9CPDb/Qjw2/0I8Nv9AOjT/QDo0/0A6NP9AOjT/QDo1/0I7L/9DPSr/Qjws
/0M9Kv9FPib/QTsy/0A6Nf9AOjT/QDo0/0A6NP9AOjT/QDo0/0A6NP9AOjT/Pzk2/0I8Lv85M0v/
Kyd1/xMRw/8SEMf/IyCP/z04PP9BOzL/QDo1/0A6NP9AOjT/QDo0/0A6NP9AOjT/QDo1/0I8L/88
NkL/DgzT/xEPyv8AAP//AAD+/wIC+f8gHZj/Qjsv/0A6NP9AOjT/QDo0/0A6NP9AOjT/QDo0/0E6
Mv8/OTj/Hxyd/xUTvf8IB+b/Cgne/xcVtf8VE73/BAPz/yIflP9EPib/Pzk3/0A6NP9AOjT/QDo0
/0A6Nf9CPC3/NjFT/x0aov8cGqX/EhDG/xEPy/8CAfr/AAD+/wAA//8MC9n/QTsy/0A6NP9AOjT/
QDo0/0A6NP8/OTb/Qz0q/zAsZv8YFbP/JCGM/woJ4f8EA/P/BQTx/wYG6/8JCOT/GBaz/z85Nv9A
OjP/QDo0/0A6NP9AOjT/QDo1/0E7Mf88NkH/FBK//yQhi/8YFrL/EA7N/xMRwv8UEr//DQzV/xgW
sv9CPCz/QDo2/0A6NP9AOjT/QDo0/0A6NP8/OTf/RD4m/x4bn/8RD8j/FhS5/wkI4v8AAP//AAD+
/wAA//8tKXH/Qz0p/z85N/9AOjT/QDo0/0A6NP9AOjT/QDo0/0A6M/8/OTb/KSV7/wQD8/8ODdP/
ExHE/xQSwP8qJnr/Qz0q/z85Nv9AOjT/QDo0/0A6NP9AOjT/QDo0/0A6NP9AOjX/QDoz/0M9Kv82
MVT/JiKH/y0ocf9AOjT/RD4o/z85Nv9AOjT/QDo0/0A6NP9AOjT/QDo0/0A6NP9AOjT/QDo0/0A6
Nf8/OTb/Qjwt/0U+JP9EPSj/QDo0/z85N/9AOjT/QDo0/0A6NP9AOjT/QDo0/0A6NP9AOjT/QDo0
/0A6NP9AOjT/QDo0/0A6Nv8/OTf/Pzk3/0A6Nf9AOjT/QDo0/0A6NP9AOjT/QDo0/0A6NP9AOjT/
QDo0/0A6NP9AOjT/QDo0/0A6NP9AOjT/QDo0/0A6NP9AOjT/QDo0/0A6NP9AOjT/QDo0/0A6NP9A
OjT/AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAA==" rel="icon" type="image/x-icon" />

<!-- <link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
<link …