[Siend]

Ребят, помогите разобраться. Элемент класса arc находясь внутри Canvas просто не отображается! Canvas его перекрывает( Если его поместить вне блока Canvas - все ок, но он мне нужен внутри.

<canvas id="canvasA">
<div id="1M0" class="arc" style="top: 214px; left: 774px;">Create</div>
</canvas>

#canvasA {
    width: 700px;
    height: 500px;
    z-index: 0;
    position: relative;
    margin: auto;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}
canvas {
    user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -webkit-touch-callout: none;
    -webkit-user-drag: none;
    z-index:0;
}

.arc{
	position:fixed;
	width:50px;
	height:50px;
	border-radius:25px;
	background-color:#000080;
	color:#FFFFFF;
	font-size:9px;
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-box-align: center;
	-moz-box-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
	-webkit-box-pack: center;
	-moz-box-pack: center;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-o-user-select: none;
	user-select: none;
	z-index:1000;
	opacity: 0.7;
}