输入框没有“hitbox”并出现在文本的前面

Question

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

这是一个代码片段，请记住，反应代码不包括在内。功能并不重要，只有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

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

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

1. 我保留了两个输入absolute，但是将它们包含在.input-container div中relative位置（因此absolute将是relative的绝对值1}}容器）。
2. 我添加了一个<label>元素来包装from:，这样就可以定位该标签了。

Answer 2

你应该设置一个相对位置的包装div并使用输入的left位置进行游戏

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

.container{
  position:relative;
}

.label{
  position: absolute;
  padding: 5px;
}

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

#autocomplete {
  position: absolute;
  top: 0;
  left: 50px;
  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="container">
    <div class="label">from:</div>
    <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>