为什么设置bottom:0不生效？无法将页面柱状元素对齐到父容器底部

问题原因 #

• bottom: 0 仅对非static定位的元素生效，初始代码中.bar是默认static定位，所以该属性不生效
• 给.bar设置position: absolute后，所有柱状条会脱离正常文档流，默认全部堆叠在父容器左下角，所以视觉上仅显示单条

解决方案 #

不需要修改定位规则，直接利用Flex布局的交叉轴对齐属性即可实现需求，仅需给.wrapper容器添加align-items: flex-end配置。

修改后的CSS代码 #

* {
    margin: 0;
    box-sizing: border-box;
}

.wrapper {
    height: 100vh;
    width: 100vw;
    background-color: rgb(75, 71, 71);
    display: inline-flex;
    /* 新增这行即可实现底部对齐 */
    align-items: flex-end;
}

.bar {
    height: 200px;
    width: 2px;
    outline: 2px solid black;
    background-color: white;
}

效果说明 #

添加配置后，Flex容器会将所有子元素（柱状条）沿垂直方向底部对齐，同时保留原有水平排列的布局，不会出现堆叠问题，完全符合排序可视化页面的柱状条排布需求。

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