html - CSS 宽度和重叠

Question

我想从输入字段的宽度继承我的 suggestion div 的宽度，同时从对象中重叠它。我下面的 CSS 重叠但不继承输入字段的宽度。我试过将其设为 100%，但它变得比输入字段长。

.suggestion {
    cursor: pointer;
    background: #FFF;
    box-shadow: 0 2px 2px 0 rgba(34,36,38,.15);
    padding: 5px 20px 5px 20px;
    border-radius: .28571429rem;
    border: 0px solid rgba(34,36,38,.15);
    z-index: 1;
    
    position: absolute; 
    width: inherit;
}
.search-res{
    margin-bottom: 5px;
}
.search-res:hover{
    margin-bottom: 5px;
    color: #2196f3;
}

.warning {
    color: orange
}

<input type="text" formControlName="name" placeholder="Enter Name..." maxlength="32">
<div class="suggestion" *ngIf="suggestions">
  <div *ngFor="let suggestion of suggestions" class="search-res" (click)="onSelectSuggestion(suggestion.name)">
      {{suggestion.name}}
  </div>
</div>

Answer 1

这是一个例子:https://codepen.io/anon/pen/KvgoPX

我改变的是:

• 要使建议 div 成为绝对的，它需要以某种方式相对于输入。这就是外面有一个输入容器的东西。这可以是您想要的任何宽度。
• 那里还有另一个对象表明它覆盖了。

.inputContainer {
  width:200px;
  position:relative;
  background:green;
}

input {
  width:100%;
}

.suggestion {
  cursor: pointer;
  background: #FFF;
  box-shadow: 0 2px 2px 0 rgba(34,36,38,.15);
  padding: 5px 20px;
  border-radius: .28571429rem;
  border: 0px solid rgba(34,36,38,.15);
  z-index: 1;
  box-sizing:border-box;
  text-align:center;
  position: absolute; 
  width: 100%;
}
.search-res{
  margin-bottom: 5px;
}
.search-res:hover{
  margin-bottom: 5px;
  color: #2196f3;
}

.warning {
  color: orange
}

<div class="inputContainer">
  <input type="text" formControlName="name" placeholder="Enter Name..." maxlength="32">
  <div class="suggestion" *ngIf="suggestions">
    <div *ngFor="let suggestion of suggestions" class="search-res" (click)="onSelectSuggestion(suggestion.name)">
      {{suggestion.name}}
    </div>
  </div>
</div>

<div class="otherStuff"> This is where other objects are </div>