CSS .hue/.luminosity类定位失效 元素居中对齐问题排查

• .hue、.luminosity以及中间显示色值的.hsl元素都没有设置position属性，默认的static静态定位模式下，top/right/bottom/left方位偏移属性完全不生效。
• body设置了flex布局+justify-content: center+align-content: center规则，所有未脱离普通文档流的子元素都会被强制居中排列，直接导致三个文本块全部堆在页面中间。
• JS代码存在语法错误：给hue元素设置高度的代码行字符串未闭合，会导致脚本运行中断。

1. 调整CSS规则，给三个文本元素添加固定定位，让其脱离普通文档流，不再受body的flex居中规则影响，替换原有对应样式为以下代码：

.hsl {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    filter: invert(100%);
    font-size: 17px;
}

.hue {
    position: fixed;
    top: 100px;
    right: 100px;
    text-align: right;
}

.luminosity {
    position: fixed;
    bottom: 100px;
    left: 100px;
}

2. 修复JS语法错误，补全hue高度设置行的闭合引号与结尾分号：

hue.style.height = "100vh";

• hsl色值文本固定在页面正中心
• hue数值固定在页面右上角，距视口边缘100px，文本右对齐
• luminosity数值固定在页面左下角，距视口边缘100px
  完全匹配预期的左右分置布局。

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