如何将input按钮定位到dark-light容器的左侧？

核心问题分析 #

你给input设置position: absolute后，它的定位基准是最近的设置了position: relative/absolute/fixed/sticky的父元素。如果你的.dark-light容器没开启定位上下文，input就会默认相对于整个视窗定位，这就是设置left时偏离容器的原因；另外，justify-content是flex容器控制正常流内子元素的对齐方式，绝对定位元素会脱离flex布局流，所以这个属性对它完全无效。

具体解决步骤 #

1. 给flex容器.dark-light添加position: relative，让它成为input的定位基准：

.dark-light {
  display: flex;
  position: relative; /* 关键：开启容器的定位上下文 */
  /* 你的其他flex相关样式 */
}

2. 给input设置left: 0，此时它会相对于.dark-light容器的左侧对齐：

.dark-light input {
  position: absolute;
  left: 0; /* 相对于容器左侧对齐 */
  /* 你的其他input样式 */
}

补充调整技巧 #

如果需要让input在容器内垂直居中，可以搭配top和transform属性：

.dark-light input {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%); /* 基于自身高度垂直居中 */
}

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