HTML/CSS定位问题：将.menuButton放置于页面左下角且图标正常显示

问题核心原因 #

• 类名拼写不匹配：你HTML中对应元素的类名写为menuButtton（包含3个连续的t），但CSS中定义的选择器是.menuButton（仅2个t），二者不匹配导致你写的所有针对.menuButton的CSS规则完全没有生效，这是你调整各类定位、布局属性都看不到效果的核心原因。
• 缺少定位属性声明：你在CSS中设置了bottom: 0、left: 0偏移值，但偏移值仅对非static的定位属性生效，默认的静态定位下偏移属性不会生效。

解决方案 #

1. 修正HTML中的类名拼写，将原有代码

<div class="menuButtton">hi</div>

修改为

<div class="menuButton">hi</div>

2. 在CSS的.menuButton规则中添加position: fixed声明，修改后的规则如下：

.menuButton{
  position: fixed;
  bottom: 0;
  left: 0;
  height: 200px;
  width: 200px;
  display: inline-block;
  text-align: center;
  border: 2px solid red;
  background-repeat: no-repeat;
  background-image: url("https://jonathanz-10.github.io/Website/images/avatar.png");
}

该修改不会改动页面的渐变背景，也不会影响其他现有元素的布局和展示，图标会按照你设置的背景规则正常显示，元素会固定在视口左下角。如果你需要元素放在页面内容的末尾左下角而非固定在视口，只需要把position: fixed改成position: absolute，同时给body添加position: relative属性即可。

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