BishopBarber BishopBarber - 3 months ago 21
CSS Question

How can I overlay a canvas over a paragraph so that its title is shown when hovering over its entirety?

I have a progress circle canvas generated by a jQuery Plugin inside of which is displayed a paragraph containing the progress percentage. I want to show a title when the user hovers anywhere on the canvas, but for some reason, when you hover over the paragraph shown inside of the canvas, the title isn't shown. It's like the paragraph overlays the part of the canvas it's in:

enter image description here

I tried to specify a bigger

z-index
value to the canvas than to the paragraph with no avail.

Relevant generated HTML:

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


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


Anyone knows how to get the desired behavior?

Plunker containing my issue

Answer

It's like the paragraph overlays the part of the canvas it's in

It is above the canvas, because z-index only works on positioned elements - which your canvas is not, so the z-index you specified for it has no effect.

Add position:relative to position the canvas, then its higher z-index will work:

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