Question

我有一个md-form-field，输入位于a之前。通过负边缘顶部将跨度拉高15px。问题是，我不能点击那个跨度，它似乎是一个普通的ol＆＃39; z-index问题，但唉，改变他们所讨论的元素的z-index，我不能让它表现出来。

我完全无法使用主题角度材料组件处理一个简单的plnkr，尽管有大量的谷歌搜索（会感激任何可以分享的人）但希望有人可以在没有扎实实例的情况下提出可能出错的建议。 / p>

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

表单字段表现完美，跨度也是如此。如果我取出负边距 - 顶部光标正常工作。问题是如果我应用负边距（以便跨度直接显示在输入下方）md-form-field scaffolded dom元素的一部分覆盖它。我尝试将一个小的z-index应用于md-form-field和输入，并将一个巨大的z-index应用于span，但无论md-form-field占用其下方的空间并且悬停在span上都不显示指针。

Answer 1

不确定我是否能在这方面提供很多帮助，但我相信这会达到您所效应的效果......

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

像往常一样愚蠢的错误，z-index仅适用于明确设置为固定，相对或绝对定位的元素。只需将我的跨度更改为position：relative现在可以使z-index表现出来。

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

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

角度材料md-form-field，邻近跨度的z-index未得到尊重

2 个答案: