なぜライブcamraの画像の重なりピクチャボックス内

Question

私が並んで像側の両方を表示したいhtmlと、すべてのWeb開発に非常に新しいです....と

<div class="col-md-6"> 
    <div class="form-group"> 
     <label class="control-label col-md-3 col-sm-3 col-xs-6">Image</label> 
     <div class="col-md-6"> 
      <div class="row"> 
       <div class="col-md-3" > 
        <div id="browseimage" class="form-group"> 
         <img id='output' src="images\user.png" height="150" width="150">  
        </div> 
       </div> 
       <div class="col-md-3" > 
        <div id="liveimage" height="150" width="150" /> 
       </div> 
      </div>      
     </div> 
     <div class="row col-md-3"> 
      <input type='file' accept='image/*' title="" onchange='openFile(event)'> 
      <button type="livecamrabtn" onClick="initialize_camra()">Live Camera</button> 
      <button value="Take Snapshot" onClick="take_snapshot()"/>  
     </div> 
    </div> 
</div> 
<script> 
    var openFile = function(event) { 
     var input = event.target; 
     var reader = new FileReader(); 
     reader.onload = function(){ 
      var dataURL = reader.result; 
      var output = document.getElementById('output'); 
      output.src = dataURL; 
     }; 
     reader.readAsDataURL(input.files[0]); 
    }; 
</script> 

を立ち往生....しかし、私は問題がどこにあるのか知りませんか？ あなたが同じdiv要素内の画像や動画divを定義する必要が

Answer 1

示唆してください。そして、ビデオdivとpostion absoluteとz-indexを与えます。

<div id="browseimage" class="form-group" style="width:150px;height:150px" > 
    <img id='output' src="images\user.png" height="150" width="150"> 
    <div id="liveimage" height="150" width="150" style="postition:absolute;z-index:999"/> 
    </div>  
</div>