css按钮按不了是因为图层覆盖,导致按钮没法使用,其解决办法:1、打开相应HTML和CSS文件;2、将p和span标签各增加相对定位为“position:relative;”;3、在span中增加优先级为“z-index: 1;”即可。

本教程操作环境:Windows10系统、CSS3版、DELL G3电脑
为什么css按钮按不了?
关于float属性导致button按钮无法点击问题的解决思路
问题描述:有两个标签p和span,p位于span上层,button位于span中,当点击button的时候,button没有动作。
立即学习“前端免费学习笔记(深入)”;
部分代码
HTML代码
{{ chapter.title }}
添加小节 编辑 删除
CSS代码
.chanpterList p{
float: left;
font-size: 20px;
margin: 10px 0;
padding: 10px;
height: 70px;
line-height: 50px;
width: 100%;
border: 1px solid #3568cd;
}
.chanpterList .acts {
float: right;
font-size: 14px;
}
什么是企业WAP网站,企业3G网站 企业WAP网站一般是指展示企业形象,介绍企业产品的WAP手机网站或者3G手机网站,让客户可以通过手机就能了解一个企业的大体情况和产品内容,从而更广泛的宣传企业,赢得更多的客户关注度!一般企业WAP网站包括:公司介绍,产品介绍,企业新闻动态,服务范围介绍,留言板,企业招聘信息等内容,如果有特殊要求,我们也会按照客户的要求定做。 企业为何要建设手机WAP网站,3
如图此添加小节按钮无法使用
之前没细看,用网上的的方法,将.chanpterList p中的 float: left;注释掉,因为图层覆盖,导致按钮没法使用,果然起作用了,也没多想。但是当有了下面显示小节的组件的时候,样式就不对了,完全乱了。这才回过头来看问题
仔细看发现,p标签在span上面,导致span里的组件没法使用,那就提升span的优先级,把span定位在最上层就好了,
现在p和span中各增加相对定位position: relative;再在span中增加优先级z-index: 1;,完成!!成功


推荐学习:《css视频教程》









