JS控制DIV内元素重叠的问题？

我的一个div内包括了一个canvas和video元素，现在我想在JS中只对video元素设置样式来将video元素放在canvas元素的中央。请问能不能实现？
测试代码如下：<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <title>test</title>
  <style type="text/css">
     <!--
       *{ margin: 0 auto; padding: 0; }
     -->
  </style>
  <script type="text/javascript">
   window.onload = function(){
   var video = document.getElementById("video");
   video.style.width = "640px";
   video.style.height = "427px";
   video.style.backgroundColor = "#F00";
   //video.style.position = "absolute";
  
   //请问如何在上面的JS中只对video元素设置样式的情况下，将video元素放置在canvas元素的中央。
   }
  </script>
</head>
<body>
<div style="text-align:center">
  <div style="width:650px; height:437px">
   <canvas style="background-color:#000; width:650px; height:437px"></canvas>
    <video id="video"></video>
    <!--video id="video" style="width:640px; height:427px; background-color:#F00; position:absolute"></video-->
    
  </div>
</div>
</body>
</html>

解决方案 »

  1.   

    备注下不能改动<body>内原来的东西。
      

  2.   

    用js控制绝对定位position:absolute
    left:100px;
    top:100px;
    z-index:1111;<div style="width:650px; height:437px;position:relative">外层div加个相对定位
      

  3.   


    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="utf-8" />
      <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
      <title>test</title>
      <style type="text/css">
         <!--
           *{ margin: 0 auto; padding: 0; }
         -->
      </style>
      <script type="text/javascript">
          window.onload = function(){
              var video = document.getElementById("video");
              video.style.width = "640px";
              video.style.height = "427px";
              video.style.backgroundColor = "#F00";
              
              video.parentNode.style.position = "relative";
      video.style.position = "absolute";
              video.style.top = "5px";
              video.style.left = "5px";
              
              //请问如何在上面的JS中只对video元素设置样式的情况下，将video元素放置在canvas元素的中央。
          }
      </script>
    </head>
    <body>
        <div style="text-align:center">
          <div style="width:650px; height:437px;">
              <canvas style="background-color:#000; width:650px; height:437px"></canvas>
      <video id="video"></video>
            <!--video id="video" style="width:640px; height:427px; background-color:#F00; position:absolute"></video-->
            
          </div>
        </div>
    </body>
    </html>
      

  4.   

    canvas和video两个element没有父子关系。如上所说，设置z-index，然后绝对定位。或者设置元素float
      

  5.   

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <title>test</title>
        <style type="text/css">
         <!--
           *{ margin: 0 auto; padding: 0; }
         -->
      </style>
        <script type="text/javascript">
            window.onload = function () {
                var video = document.getElementById("video");
                video.style.width = "640px";
                video.style.height = "427px";
                video.style.backgroundColor = "#F00";
                video.style.position = "relative";            //请问如何在上面的JS中只对video元素设置样式的情况下，将video元素放置在canvas元素的中央。
            }
        </script>
    </head>
    <body>
        <div style="text-align: center">
            <div style="width: 650px; height: 437px">
                <canvas style="background-color: #000; width: 650px; height: 437px; position:absolute;">
                </canvas>
                <video id="video">
                </video>
                <!--video id="video" style="width:640px; height:427px; background-color:#F00; position:absolute"></video-->
            </div>
        </div>
    </body>
    </html>这样？
    设置一下2个的position 就行了
      

  6.   

    你的方法最接近我的想法，但还是违反了要求“只对video元素设置样式”的条件，我现在想如果要让video的绝对位置是相对于video的父级来说，那么是不是只能让父级的position设置为相对位置啊？
      

  7.   

    或许你能用padding 和margin 二个属性去试试。
      

  8.   

    刚才发现好象只要加下面两句就可以了。video.style.position = "relative";
    video.style.top = "-437px";
      

  9.   

    突然发现我这种方法是错误的因为video元素仍然占据原来的空间。