Question

我正在尝试重叠画布，但浏览器没有显示重叠

HTML代码

<!DOCTYPE html />
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="chrome=1, IE=edge">
    <title>well Trajectory</title>
    <link rel="Stylesheet" href="main.css" />
</head>
<body>
<div id="mainDiv">
<img id="loading" src="loading.gif" style=" position:relative; left:30%; top:30%" />
</div>
</body>
</html>

CSS代码

body 
{        
    background-color:#FFFFFF;
}

#mainDiv
{
    margin:auto;
    width:300px;
    height:300px;
    background-image:transparent;
    position:relative ;
}

Jquery代码

function drawGauge(idParent, width, height) {
    $('#loading').remove();
    $canvasDiv = "<canvas id='gg_layer1'/>";
    $(idParent).append($canvasDiv);

    $('#gg_layer1').attr('width', width).attr('height', height).css('background-color', 'red').css('position', 'relative').css('z-index', 0).css('left', '0px').css('top', '0px');
}

function drawPointer(idParent, width, height, color) {

    $('#loading').remove();
    $canvasDiv = "<canvas id='gg_layer2'/>";
    $(idParent).append($canvasDiv);

    $('#gg_layer2').attr('width', width).attr('height', height).css('background-color', '#555555').css('position', 'relative').css('z-index', 1).css('left', '0px').css('top', '0px');
    var center = width / 2;
}
$(document).ready(function() {
    drawGauge('#mainDiv', $('#mainDiv').width(), $('#mainDiv').height());
    drawPointer('#mainDiv', $('#mainDiv').width(), $('#mainDiv').height());
});

Answer 1

尝试在脚本中使用绝对定位来重叠项目

css('position', 'absolute')

附加示例中的多层画布问题

1 个答案: