段落の上にキャンバスをオーバーレイすると、全体の上にカーソルを置いたときにタイトルが表示されます。

Question

jQueryプラグインによって生成されたプログレスサークルキャンバスがあり、その中に進捗率を含む段落が表示されます。ユーザーがキャンバス上のどこにでも移動したときにタイトルを表示したいのですが、何らかの理由でキャンバス内に表示されている段落の上にカーソルを置くとタイトルが表示されません。私は無駄と段落よりもキャンバスに大きなz-index値を指定しようとした

：段落が、それは中のキャンバスの一部をオーバーレイするようなものです。

関連生成されたHTML：

<div id="surveyCompletionProgress" class="progressCircle" data-title="hey"> 
    <canvas width="100" height="100" title="hey"></canvas> 
    <p>0<i>%</i></p> 
</div> 

関連するCSSは：

#surveyCompletionProgress { 
    width: 100%; 
    display: block; 
    margin: 0.5em auto; 
    line-height: 1.2; 
    position: relative; 
    text-align: center; 
} 

#surveyCompletionProgress canvas { 
    z-index: 100; 
} 

#surveyCompletionProgress p { 
    line-height: 1.2em; 
    font-size: 2em; 
    top: 1em; 
    cursor: default; 
    position: absolute; 
    left: 0; 
    width: 100%; 
    text-align: center; 
    z-index: 10; 
} 

誰もが目的の動作を取得する方法を知っていますか？

Plunker containing my issue

Answer 1

段落は、z-indexが唯一の位置付け要素上で動作しますので、それは

でのキャンバスの一部が、それは、キャンバス上であるオーバーレイようなものだ - あなたのキャンバスそうではないので、あなたが指定したz-インデックスは効果がありません。

追加位置：キャンバスを位置に対しては、その上位のz-indexが動作します：

#surveyCompletionProgress canvas { 
    position: relative; 
    z-index: 100; 
}