css - Angular Material md-form-field，不考虑相邻跨度的 z-index

Question

我有一个 md-form-field，其输入位于 .通过负边距顶部将跨度拉高 15px。问题是我无法点击该跨度，这似乎是一个常规的 ol' z-index 问题，但可惜更改了他们有问题的元素的 z-index，我无法使其正常运行。

尽管进行了大量谷歌搜索(我将不胜感激任何可以分享的人)，但我什至无法获得一个简单的 plnkr 使用主题 Angular Material 组件，但希望有人可以在没有可靠实例的情况下提出可能存在的问题。

<md-form-field>
        <input mdInput placeholder="the input">
</md-form-field>
<span> clickable element </span>


span {
      display: block;
      margin-top: -15px;
      cursor: pointer;
}

md-form-field {
   width: 100%;
}

表单字段和跨度一样完美。如果我取出负 margin-top 光标工作正常。问题是如果我应用 md-form-field 脚手架 dom 元素的负边距(以便跨度直接显示在输入下方)部分覆盖它。我尝试将一个小的 z-index 应用于 md-form-field 和输入，并将一个巨大的 z-index 应用于跨度，但无论 md-form-field 占用它下面的空间是什么并且悬停在跨度上都不会显示一个指针。

Answer 1

不确定我在这里是否能提供很多帮助，但我相信这会达到您想要的效果......

span {
  position: absolute;
  display: inline-block;
  top: 0;
  left: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
}

md-form-field {
  position: relative;
  display: inline-block;
  width: 100%;
}

<md-form-field>
  <input mdInput placeholder="the input">
  <span> clickable element </span>
</md-form-field>