如何实现hover输入框时其拉伸至父div全宽并覆盖同层级span元素

核心逻辑是让固定提示的span脱离正常文档流，避免被input扩张时挤压，实现覆盖效果，具体改动如下：

改动点说明 #

• 给父容器.container添加position: relative，作为内部绝对定位元素的参照
• 给.span1添加绝对定位固定显示位置，脱离flex布局的正常排列流
• 给input添加背景色和层级属性，确保hover时可以完全覆盖下层的span元素

完整CSS代码 #

* {
  font-family: monospace;
  margin: 0;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.container {
  width: 330px;
  height: 30px;
  border: 1px solid black;
  display: flex;
  position: relative;
  justify-content: flex-start;
  align-items: center;
  padding: 0 15px;
  box-sizing: border-box;
}

.span1 {
  position: absolute;
  left: 15px;
}

#input1 {
  position: relative;
  z-index: 1;
  margin-left: auto;
  width: 70px;
  transition: .8s;
  background: #fff;
  border: 1px solid #ccc;
}

#input1:hover {
  width: 100%;
}

HTML代码（无需修改，和原有代码一致） #

<div class="container">
  <span class="span1">what do you have to do?</span>
  <input id="input1" type="text" placeholder="">
</div>

修改后hover输入框时，输入框会平滑过渡到占满整个容器宽度，完全覆盖下层的span文字，符合预期效果。

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