Javascript-форум (https://javascript.ru/forum/)
-   (X)HTML/CSS (https://javascript.ru/forum/xhtml-html-css/)
-   -   z-index у элемента внутри Canvas'a (https://javascript.ru/forum/xhtml-html-css/54446-z-index-u-ehlementa-vnutri-canvas%27.html)

Siend 17.03.2015 18:03

z-index у элемента внутри Canvas'a
 
Ребят, помогите разобраться. Элемент класса 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;
}

laimas 17.03.2015 19:35

Канва, это контекст устройства в котором рисуют, а не бокс для чего-то.

<canvas>text</canvas> - браузеры не поддерживающие это отобразят text, а с поддержкой ничего не покажет.

Siend 17.03.2015 19:56

пасиб, мои поиски привели к тому же самому результату)


Часовой пояс GMT +3, время: 08:52.