我有一个 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 占用它下面的空间是什么并且悬停在跨度上都不会显示一个指针。
最佳答案
不确定我在这里是否能提供很多帮助,但我相信这会达到您想要的效果......
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>
关于css - Angular Material md-form-field,不考虑相邻跨度的 z-index,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46615580/