html canvas 上加按钮,请教如何在canvas定位关闭按钮和button?

博客作者在尝试在canvas上添加关闭和下一步按钮时遇到了问题。关闭按钮的div未显示,而下一步按钮未能居中。作者发现当元素设置为absolute定位后,margin:0 auto不再起作用,改用left属性解决了位置问题。同时,讨论了在canvas上的按钮是否需要设置z-index。问题已部分解决,但仍需考虑按钮的层级和居中对齐的优化策略。

准备在canvas添加一个关闭按钮(期待在右上角)和一个下一步的按钮(页面下部88% 居中),都设了为绝对定位,运行后,出现的问题

1) 关闭按钮所在的div显示不了

2) 下一步的按钮总是靠左,没有居中(需要在上面再套一个div吗?)。

-----这个问题找到了,元素设为absolute后,margin:0 auto不再生效,可以使用left来定位

3)对于canvas上面的按钮需要设z-index吗?

不胜感激

TODO supply a title

.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;

}

下一步

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值