Question

我正在尝试沿着画布的“左边框”显示一个与画布元素重叠的跨度。

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

无论我尝试过什么，后面的元素都没有出现。除了背部元素从上到下定位在50,50之外，是否有人知道我做错了什么？

干杯，约书亚

Answer 1

这是你想要做的吗？

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

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

Answer 2

在没有看到其余代码的情况下，我的第一个猜测是问题是由于span标记。跨度是内联元素，这意味着它们的行为与块元素不同。尝试使用css将span的显示属性更改为“block”，或者只使用div而不是span。

创建重叠元素

2 个答案: