Creating overlapping elements

问题

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

回答1:

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)

回答2:

Without seeing the rest of your code, my first guess is that the problem is because of the span tag. Spans are inline elements, which means they don't behave the same as block elements. Try using css to change the display property of the span to 'block', or simply use a div instead of a span.

来源：https://stackoverflow.com/questions/4767445/creating-overlapping-elements

标签

javascript

jquery

css

html

z-index