如何固定页面按钮至屏幕左下角，避免其随打字动画移位？

按钮随打字动效移位由三点导致：

• 按钮当前使用position: relative相对定位，处于正常文档流内，前方打字文本长度动态变化时，会直接改变按钮的排版位置
• HTML结构存在冗余闭合标签，按钮后方多写了2个无效</a>，会造成浏览器布局解析异常
• 按钮上的内联样式vertical-align:middle;margin:50px 0px受父级文本居中规则约束，会跟随前方内容宽度自动调整位置

1. 替换按钮定位样式 #

将.button样式中的定位规则改为固定定位，让按钮脱离文档流，直接钉在视口左下角，完全不受文本变化影响。替换后的.button基础样式如下，其余hover、active、after伪类样式保持原有代码不变即可：

.button {
  /* 原有position、top、left、right、bottom属性全部删掉，换成下面这三行 */
  position: fixed;
  left: 2rem;
  bottom: 2rem;
  z-index: 999;
  /* 以下原有样式保留，可根据视觉效果调整字号、内边距 */
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  padding: 12px 36px;
  border: 1px solid #a12727;
  border-radius: 98px;
  background: #bd4aff;
  background: -webkit-gradient(linear, left top, left bottom, from(#bd4aff), to(#992727));
  background: -moz-linear-gradient(top, #bd4aff, #992727);
  background: linear-gradient(to bottom, #bd4aff, #992727);
  -webkit-box-shadow: #ff5959 0px 0px 40px 0px;
  -moz-box-shadow: #ff5959 0px 0px 40px 0px;
  box-shadow: #ff5959 0px 0px 40px 0px;
  text-shadow: #591717 1px 1px 0px;
  font: normal normal bold 20px arial;
  color: #ffffff;
  text-decoration: none;
}

left和bottom的数值控制按钮距离屏幕左、下边缘的间距，数值越大按钮离边角越远，可按需调整。z-index: 999用来保证按钮始终显示在最上层，不会被其他内容遮挡。

2. 清理HTML结构 #

删除按钮后方多余的2个无效</a>标签，同时移除按钮标签上的内联样式style="vertical-align:middle;margin:50px 0px"，避免和固定定位样式冲突。修正后的body结构参考：

<body>
  <h1>
    <a href="" class="typewrite" data-period="1000" data-type='[ "Hi, Welcome to my site", "A Website created entirely from scratch by me.", "Click the button below to go to games or wait here to be redirected to home."]'>
      <span class="wrap"></span>
    </a>
  </h1>
  <a class="button" href="#">Click to go to Games</a>

  <!-- 原有打字动效JS代码无需修改，保持原有引用逻辑即可 -->
</body>

说明 #

打字动效的JS逻辑本身不存在问题，不需要做任何改动。完成上述两步修改后，按钮会始终固定在屏幕左下角，不会再随打字文本的长度变化发生移位。

内容的提问来源于stack exchange，提问作者Devin Shroff