创建重叠元素 [英] Creating overlapping elements
本文介绍了创建重叠元素的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想在画布的左边框中显示一个与canvas元素重叠的span。
<！doctype html />
< html>
< head>
< title> Z-Index< / title>
< / head>
< body>
< div id =timeline_wrapper>< / div>
< script type =text / javascript>
var canvas = document.createElement（'canvas'）;
canvas.setAttribute（'width'，500）;
canvas.setAttribute（'height'，500）;
canvas.setAttribute（'style'，'border：1px solid; position：absolute; top：8px; left：8px; z-index：0;'）;
document.getElementById（timeline_wrapper）。appendChild（canvas）;
//回退按钮
var back = document.createElement（'div'）;
back.setAttribute（'width'，50）;
back.setAttribute（'height'，500）;
back.setAttribute（'style'，'background-color：＃336699; position：absolute; left：8px; top：8px; z-index：1'）;
document.getElementById（timeline_wrapper）。appendChild（back）;
< / script>
< / body>
< / html>
无论我尝试了什么，后面的元素根本不显示。
除了后面的元素被定位在50，50从顶部，左边，有人知道我做错了吗？
干杯，
Joshua
解决方案
这是你想要做什么吗？
<！doctype html />
< html>
< head>
< title> Z-Index< / title>
< / head>
< body>
< div id =timeline_wrapper>< / div>
< script type =text / javascript>
var canvas = document.createElement（'canvas'）;
canvas.setAttribute（'style'，'border：1px solid; position：fixed; top：8px; left：8px; z-index：0; width：500px; height：500px;'）;
document.getElementById（timeline_wrapper）。appendChild（canvas）;
//回退按钮
var back = document.createElement（'div'）;
back.setAttribute（'style'，'background-color：336699; position：absolute; left：8px; top：8px; z-index：1; width：50px; height：500px;'）;
document.getElementById（timeline_wrapper）。appendChild（back）;
< / script>
< / body>
< / html>
（我将宽度和高度移到css中， p>
I'm trying to display a span overlapping a canvas element along the canvas' left border.
<!doctype html />
<html>
<head>
<title>Z-Index</title>
</head>
<body>
<div id="timeline_wrapper"></div>
<script type="text/javascript">
var canvas = document.createElement('canvas');
canvas.setAttribute('width', 500);
canvas.setAttribute('height', 500);
canvas.setAttribute('style', 'border: 1px solid; position: absolute; top: 8px; left: 8px; z-index: 0;');
document.getElementById("timeline_wrapper").appendChild(canvas);
// draw back button
var back = document.createElement('div');
back.setAttribute('width', 50);
back.setAttribute('height', 500);
back.setAttribute('style', 'background-color: #336699; position: absolute; left: 8px; top: 8px; z-index: 1');
document.getElementById("timeline_wrapper").appendChild(back);
</script>
</body>
</html>
No matter what I've tried, the back element doesn't show up at all. Apart from the back element being positioned at 50, 50 from top, left, does someone know what I'm doing wrong?
Cheers, Joshua
解决方案
Is this what you are trying to do?
<!doctype html />
<html>
<head>
<title>Z-Index</title>
</head>
<body>
<div id="timeline_wrapper"></div>
<script type="text/javascript">
var canvas = document.createElement('canvas');
canvas.setAttribute('style', 'border: 1px solid; position: fixed; top: 8px; left: 8px; z-index: 0; width: 500px; height: 500px;');
document.getElementById("timeline_wrapper").appendChild(canvas);
// draw back button
var back = document.createElement('div');
back.setAttribute('style', 'background-color: 336699; position: absolute; left: 8px; top: 8px; z-index: 1; width: 50px; height: 500px;');
document.getElementById("timeline_wrapper").appendChild(back);
</script>
</body>
</html>
(I moved the width and height into the css, it isn't a dom attribute)
这篇关于创建重叠元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
