Javascript 创建重叠元素_Javascript_Jquery_Css_Html_Z Index

Javascript 创建重叠元素

javascript jquery css html

Javascript 创建重叠元素,javascript,jquery,css,html,z-index,Javascript,Jquery,Css,Html,Z Index,我试图沿着画布的左边框显示与画布元素重叠的跨度 <!doctype html /> <html> <head> <title>Z-Index</title> </head> <body> <div id="timeline_wrapper"></div> <script type="text/javascript">

我试图沿着画布的左边框显示与画布元素重叠的跨度

<!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>


Z指数
var canvas=document.createElement（'canvas'）；
canvas.setAttribute（'width'，500）；
canvas.setAttribute（'height'，500）；
setAttribute（'style'，'border:1px solid；position:absolute；top:8px；left:8px；z-index:0；'）；
document.getElementById（“时间线包装”）.appendChild（画布）；
//后退按钮
var back=document.createElement（'div'）；
back.setAttribute（'width'，50）；
back.setAttribute（'height'，500）；
setAttribute（'style'，'background color:#336699；position:absolute；left:8px；top:8px；z-index:1'）；
document.getElementById（“timeline_wrapper”）.appendChild（返回）；

无论我尝试了什么，back元素都不会出现。除了后面的元素被定位在50，50从顶部，左边，有人知道我做错了什么吗

干杯，

Joshua

在没有看到其余代码的情况下，我的第一个猜测是问题在于span标记。跨距是内联图元，这意味着它们的行为与块图元不同。尝试使用css将span的显示属性更改为“block”，或者简单地使用div而不是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('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>


Z指数
var canvas=document.createElement（'canvas'）；
setAttribute（'样式'，'边框：1px实体；位置：固定；顶部：8px；左侧：8px；z索引：0；宽度：500px；高度：500px；'）；
document.getElementById（“时间线包装”）.appendChild（画布）；
//后退按钮
var back=document.createElement（'div'）；
setAttribute（'style'，'back color:336699；position:绝对；left:8px；top:8px；z-index:1；width:50px；height:500px；'）；
document.getElementById（“timeline_wrapper”）.appendChild（返回）；

（我将宽度和高度移动到css中，它不是dom属性）

为什么画布是固定的，跨度是绝对的。336699不是有效的颜色。在“#”前面加上前缀。@edwin:将“固定”更改为“绝对”，并在“#”前面加上前缀。运气不好，更新问题以反映排除的原因。我更改了问题，以便它可以自行运行。我把跨度改成了div，还是不走运。谢谢！这正是我想做的。将宽度和高度移动到css就成功了。是只有div没有宽度和高度dom属性，还是画布和div都有？我问这个问题是因为画布本身总是在我的实验中被画出来的。在html5（我刚刚注意到你正在使用）中，画布标签确实有高度和宽度属性，尽管通常认为将这些属性放在样式表中是一种好的做法。