无法使div正确重叠

Question

我有一个div，它使用canvas元素来获取用户的签名。我试图创建签名框较大的外观，但画布必须保持相同的大小，所以我把它放在另一个匹配灰色框的div中。他们并没有完全排队（正如你在图片中看到的那样），但我无法弄清楚我做错了什么。任何帮助将不胜感激！

这是签名框：

CSS：

// inner div containing the canvas
#signature { 
   cursor: crosshair !important;
   position: relative;
   width: 600px;
   margin: auto;
   z-index: 1;
 }

// outer div
#signature-box {
   padding: 0px;
   height: 150px;
   z-index: 2;
 }

// top bar for the outer div
.signature-bar-top {
   background: rgba(0, 0, 0, 0.14902);
   height: 25%;
   position: absolute;
   top: 0px;
   width: 100%;
  }

// bottom bar for the outer div
.signature-bar-bottom {
   background: rgba(0, 0, 0, 0.14902);
   height: 25%;
   position: absolute;
   bottom: 0px;
   width: 100%;
        }

signature.jade：

#signature-box.col-xs-12
    .signature-bar-top
    #signature(
      rr-sketch='signature',
      rr-sketch-width='600',
      rr-sketch-height='150',
      rr-sketch-signature='1',
      ng-mousedown='signature_modified = true; information_form.$dirty = true;',
      ng-touchstart='signature_modified = true; information_form.$dirty = true;'
    )
    .signature-bar-bottom

用于创建画布的Angular指令：

 // Sets up an element to become a free hand draw canvas.
app.directive('rrSketch', function() {
    return {
        restrict: 'A',
        link: function(scope, el, attrs) {
            setTimeout(function(){
                el.jqScribble({
                    width: attrs.rrSketchWidth,
                    height: attrs.rrSketchHeight
                });
                scope[attrs.rrSketch] = scope[attrs.rrSketch] || {};
                scope[attrs.rrSketch].download = function(cb, type){
                    $('canvas', el).get(0).toBlob(function(blob){
                        cb(blob);
                    }, type || 'image/png');
                };
                scope[attrs.rrSketch].reset = function(){
                    el.data('jqScribble').clear();
                };
                if (attrs.rrSketchSignature) {
                    el.prepend($('<div />').css({
                        background: 'rgba(0, 0, 0, 0.15)',
                        left: 0,
                        height: '25%',
                        'pointer-events': 'none',
                        position: 'absolute',
                        right: 0,
                        top: 0,
                    }));
                    el.append($('<div />').css({
                        background: 'rgba(0, 0, 0, 0.15)',
                        bottom: 0,
                        left: 0,
                        height: '25%',
                        'pointer-events': 'none',
                        position: 'absolute',
                        right: 0,
                    }));
                }
                scope.$apply();
            });
        }
    };
});