javascript - 输入框没有 "hitbox"并且出现在文本前面

Question

我在创建自动完成/自动建议输入框时遇到问题。这是它目前的工作方式:https://i.imgur.com/2RzI3il.gifv

这是一个代码片段，请记住，不包括 react 代码。功能并不重要，重要的是 CSS 布局。

.App {
  text-align: center;
  font-family: "Ubuntu", sans-serif;
}

#main{
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  background: transparent;
}
#autocomplete{
  position: absolute;
  top: 0;
  left: 0;
  background: transparent;
  z-index: 0;
}

.LocationInput {
  position: relative;
  margin: 30px;
  font-size: 1.1em;
  font-family: "proxima-nova", Arial;
}

.LocationInput-Input {
  padding: 5px 5px;
  box-sizing: border-box;
  border-radius: 10px;
  border: 1px solid #002857;
  -webkit-transition: 0.5s;
}

.LocationInput-Input:focus {
  outline: none;
}

.LocationInput-Input-Valid {
  padding: 5px 5px;
  box-sizing: border-box;
  border-radius: 10px;
  border: 1px solid rgb(107, 175, 19);
  -webkit-transition: 0.5s;
}

.LocationInput-Input-Valid:focus {
  outline: none;
}

<div class="App" class="LocationInput LocationInput-from">
  <div>
    from:
    <input type="text" id="main"
           class="LocationInput-Input-Valid"
           value="Thórshavn">
  </div>
  <div>
    <input type="text" id="autocomplete"
           class="LocationInput-Input"
           value="Thórshavn" disabled="">
  </div>
</div>

我希望它像这样显示:https://i.imgur.com/qFFn5Gu.png

但是，它是这样显示的:https://i.imgur.com/irU05Yh.png

当我使用 Chrome 的检查工具时，我发现元素有这些奇怪的“hitboxes”:https://i.imgur.com/b923Dzp.gifv

虽然这可能不相关？我已经尝试解决这个问题，但我对 CSS 的理解太烂了 :p

Answer 1

有多种方法可以解决这个问题，这里是其中一种:

.App {
  text-align: center;
  font-family: "Ubuntu", sans-serif;
}

.input-contianer {
  position: relative;
  text-align: left;
}
label {
  display: inline-block;
  margin-top: 5px;
}
#main{
  position: absolute;
  top: 0;
  left: 60px;
  z-index: 1;
  background: transparent;
}
#autocomplete{
  position: absolute;
  top: 0;
  left: 60px;
  background: transparent;
  z-index: 0;
}

.LocationInput {
  position: relative;
  margin: 30px;
  font-size: 1.1em;
  font-family: "proxima-nova", Arial;
}

.LocationInput-Input {
  padding: 5px 5px;
  box-sizing: border-box;
  border-radius: 10px;
  border: 1px solid #002857;
  -webkit-transition: 0.5s;
}

.LocationInput-Input:focus {
  outline: none;
}

.LocationInput-Input-Valid {
  padding: 5px 5px;
  box-sizing: border-box;
  border-radius: 10px;
  border: 1px solid rgb(107, 175, 19);
  -webkit-transition: 0.5s;
}

.LocationInput-Input-Valid:focus {
  outline: none;
}

<div class="App" class="LocationInput LocationInput-from">
  <div class="input-contianer">
    <label>
    from:
    </label>
    <input type="text" id="main"
           class="LocationInput-Input-Valid"
           value="Thórshavn">
    <input type="text" id="autocomplete"
           class="LocationInput-Input"
           value="Thórshavn" disabled="">
  </div>
</div>

1. 我保留了两个输入 absolute定位，但将它们包裹在 .input-container 中具有 relative 的 div位置(因此 absolute 将是 relative 容器的绝对位置)。
2. 我添加了一个 <label>将包裹 from: 的元素, 这样您就可以定位该标签。