在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問(wèn)答/HTML5  HTML/ 請(qǐng)教如何在canvas定位關(guān)閉按鈕和button?

請(qǐng)教如何在canvas定位關(guān)閉按鈕和button?

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

回答
編輯回答
離夢(mèng)

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

2017年10月31日 19:32