鍍金池/ 問答/HTML5  HTML/ 請教如何在canvas定位關(guān)閉按鈕和button？

請教如何在canvas定位關(guān)閉按鈕和button？

準(zhǔn)備在canvas添加一個關(guān)閉按鈕（期待在右上角）和一個下一步的按鈕（頁面下部88% 居中），都設(shè)了為絕對定位，運(yùn)行后，出現(xiàn)的問題
1） 關(guān)閉按鈕所在的div顯示不了
2） 下一步的按鈕總是靠左，沒有居中（需要在上面再套一個div嗎？）。
-----這個問題找到了，元素設(shè)為absolute后，margin:0 auto不再生效，可以使用left來定位
3）對于canvas上面的按鈕需要設(shè)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>

回答
編輯回答
離夢

3.canvas本身是一個圖層，而且也有正常的z-index屬性，所以可以看成一個普通的div，所以自然需要z-index的操作。
2.居中的請用“text-align”（不止對文字有效哦）。
1.display屬性請?jiān)O(shè)為“inline”。

2017年10月31日 19:32