我一直很好奇这个Tumblr网站是怎么做到把那个小小的“云朵图片”相对于已发布的帖子的底部来定位的。你可以在这个网站看到效果：https://kinmokusen.tumblr.com

到目前为止，我尝试使用绝对定位，但结果只是让它停在页面的同一个位置；而相对定位则在原始div所在的位置后留下了一大段空白。

解决方案

This is a fun little CSS attribute called position: fixed;. Basically, it fixes the object to a specific point in the viewport (the viewable area in the browser). These are the relevant lines of css from the example:

.header {
    position: fixed;
    z-index: 4;
}

.navplace {
    position: fixed;
    top: 16px;
    right: 844px;
    width: 520px;
    height: 107px;
    z-index: 99;
}

.entries {
    position: absolute;
    margin-top: 190px;
    right: 853px;
    width: 520px;
    z-index: 3;
}

请记住，像这样放置元素可能会对无障碍工具造成影响。当某些工具放大字体时，固定的那一部分页面可能在其增长过程中开始覆盖其余网站，或者如果定义了高度，文本就可能被截断。如果你在这些区域使用文本（如示例中的情况），请通过允许 overflow: scroll; 或类似的方式来考量这一点。

备选方案

通过使用位置 relative 和 absolute，实现起来相当简单。

* {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

.post {
  padding-bottom: 160px;
  width: 570px;
  margin: auto;

  position: relative;
}

.post h1 {
  border-bottom: 1px solid gray;
  margin-bottom: 10px;
  padding: 5px 0;
}

.post .article {
  background: #EEE;
  padding: 10px 0;
}

.post img {
  position: absolute;
  bottom: 0;
  left: 0;
}

<div class="container">
  <div class="post">
    <h1>The quick brown fox jumps over the lazy dog.</h1>
    <article class="article">
      The quick brown fox jumps over the lazy dog.  The quick brown fox jumps over the lazy dog.  The quick brown fox jumps over the lazy dog.  The quick brown fox jumps over the lazy dog.  The quick brown fox jumps over the lazy dog.  The quick brown fox jumps over the lazy dog.  The quick brown fox jumps over the lazy dog.  The quick brown fox jumps over the lazy dog.
    </article>
    <img src="https://i.sstatic.net/AtWpnJ8J.png" />
  </div>
</div>