如何实现垂直重叠的两个HTML输入元素可见且仅顶部输入框可编辑？

我来帮你搞定这个问题！你当前遇到的核心问题是定位布局基准不一致、元素背景遮挡，以及disabled元素的事件拦截，调整一下布局结构和样式就能完美解决：

核心思路 #

1. 用一个父容器统一两个输入框的定位基准，避免布局错位；
2. 让顶层的ion-input设置透明背景，这样就能透过它看到底层输入框的内容；
3. 底层的disabled输入框放在绝对定位的底层，既不会拦截顶层输入框的交互，又能稳定显示提示内容。

修改后的代码实现 #

HTML部分（添加父容器并调整样式类）

<div class="input-wrapper">
  <!-- 顶层可编辑的ion-input -->
  <ion-input 
    clear-input 
    id="city" 
    #cityInput 
    [(ngModel)]="value" 
    name="fieldName" 
    ngDefaultControl 
    (change)="cityInputChanged(cityInput.value);"
    class="top-editable-input"
  > </ion-input>
  
  <!-- 底层显示提示的input -->
  <input 
    id="typeahead" 
    type="text" 
    class="bottom-autocomplete" 
    disabled 
    [(ngModel)]="placeholderValue" 
  />
</div>

CSS部分（调整定位、层级和背景）

/* 父容器：作为两个输入框的定位基准 */
.input-wrapper {
  position: relative;
  height: 32px; /* 和输入框高度保持一致 */
  width: 100%;
}

/* 顶层可编辑输入框：透明背景+高层级 */
.top-editable-input {
  position: relative;
  z-index: 2;
  height: 100%;
  width: 100%;
  /* 关键：设置背景透明，才能看到底层内容 */
  --background: transparent;
  --border-width: 0; /* 可选：去掉默认边框，避免遮挡 */
  --box-shadow: none; /* 可选：去掉默认阴影 */
}

/* 底层提示输入框：绝对定位+低层级 */
.bottom-autocomplete {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  height: 100%;
  width: 100%;
  color: silver;
  border: none; /* 去掉默认边框 */
  padding: 0 10px; /* 和ion-input的内边距保持一致，避免内容错位 */
  box-sizing: border-box;
  background-color: transparent; /* 可选：确保背景不干扰 */
}

为什么这样能解决问题？ #

• 父容器的position: relative让两个输入框的定位都基于这个容器，不会出现偏移或脱离文档流的问题；
• 顶层ion-input用z-index:2保持在最上层，同时透明背景让底层输入框的内容能透出来，而且它的可编辑状态不会被干扰；
• 底层的disabled输入框用z-index:1放在下层，绝对定位铺满容器，既显示了提示内容，又不会拦截顶层输入框的点击/输入事件（因为事件会被顶层元素优先接收）；
• 统一了两个输入框的尺寸和内边距，确保内容显示位置完全对齐。

额外注意事项 #

• 如果你的Ionic版本对ion-input的CSS变量支持不同，可以直接用background-color: transparent !important强制设置透明背景；
• 确保placeholderValue是你需要显示的动态提示内容，比如用户输入时的联想建议；
• 测试不同设备的显示效果，根据需求调整内边距、字体大小等样式细节。

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