角材料MD-表單字段，相鄰跨度不的z索引被尊重

Question

我有一個MD-形式場與前只是一個定位的輸入。跨度通過負邊距拉起15px。問題是，我不能點擊跨度，似乎像一個普通的醇」 z-index的問題，但很可惜他們改變有關元素的z-index和我不能使其行爲。

儘管存在大量的Google搜索（會感謝任何人可以分享），但是希望有人能夠提出可能是錯誤的，而沒有一個可靠的實例，我甚至完全無法獲得即使是主角材料組件也能使用的簡單plnkr。

<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-表單字段腳手架DOM元素覆蓋它的一部分。我試圖將一個小的z-index到MD-表單域和輸入，以及一個巨大的一個跨度，但不管是什麼MD-表單字段佔空間，下方徘徊在跨度上不顯示一個指針。

Answer 1

愚蠢的錯誤像往常一樣，z-index的僅適用於明確設置爲固定，相對或絕對定位的元素。簡單地改變我的跨度位置：相對現在做的z-index的行爲。

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

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

Answer 2

不知道如果我能有太大幫助在這裏，但我相信，這達到你後的效果......

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>