请教如何在canvas定位关闭按钮和button？

Question

请教如何在canvas定位关闭按钮和button？

261923

发布于
2017-11-28

更新于
2017-11-28

准备在canvas添加一个关闭按钮（期待在右上角）和一个下一步的按钮（页面下部88% 居中），都设了为绝对定位，运行后，出现的问题
1）关闭按钮所在的div显示不了
2）下一步的按钮总是靠左，没有居中（需要在上面再套一个div吗？）。
-----这个问题找到了，元素设为absolute后，margin:0 auto不再生效，可以使用left来定位
3）对于canvas上面的按钮需要设z-index吗？
不胜感激

<html>

<head>
    <title>TODO supply a title</title>
    <style>

        .closebtn {
            z-index:9;
            color:red;
            top: 20px;
            right: 45px;
            font-size: 25px;
            display:inline-block;   
            position: absolute;
        }          

        .nextbtn {
            color:#ffffff;
            font-family: "Helvetica neue";
            font-size:14px;
            font-weight:Bold;
            border-radius:2px; 
            width:132px;
            height:38px;
            margin:0 auto;
            background-clip: padding box; 
            background-color:wsSelectBarColor;
            top:88%;
            display:block;   
            text-align: center;
            /* align-content:center; */
            z-index:9;
            position: absolute;
        }
    </style>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
    <div>

        <canvas id="box" width="1920" height="920" style="position: absolute; top:0; left:0; border:1px solid black; background: gray"></canvas>
        <div id="cancel_overlay"   style="text-align: right; font-size:36px;top:20px;left:95%;z-index:9；border:2px solid red;height:30px  "   >
            <a href="#" title="close"    class="closebtn"></a>
        </div>
        <button  id="continueoverlay" class="nextbtn" > 下一步 </button> 
   </div>
</body>

</html>

html5 javascript

阅读 4.1k

1 个回答

得票最新

virginiadb

31614

发布于
2017-11-28

3.canvas本身是一个图层，而且也有正常的z-index属性，所以可以看成一个普通的div，所以自然需要z-index的操作。
2.居中的请用“text-align”（不止对文字有效哦）。
1.display属性请设为“inline”。

撰写回答