按钮浮动后点不了了?
事情是这样的,有一个列表页面,从上到下共有 3
个部分,头部是一个查询区域,查询区域下方是操作按钮区域,再下面是列表,像这样:
项目经理指着列表上方的空白说:“小王啊,这边的操作按钮就这几个,别换行了,直接放上面吧”,“可以,将它们靠右显示是吧?”我心想,那还不简单嘛,分分钟给你解决。
我原本以为调整一下 HTML
代码结构,再 float
一下就可以了,乍一看确实也实现了效果,但当我尝试去点击浮动后的按钮时,却发现光标移动到按钮上时“小手”没有出现,点击也没反应。
“奇怪了”,我皱了皱眉头,“我就浮动了一下,怎么按钮就点不了了呢?”“难道是需要清除浮动?”,抱着试一试的心态,我编写了清除浮动的样式代码:
.clearfix::after {
content: "";
display: block;
clear: both;
/* 兼容性 */
visibility: hidden;
height: 0;
}
然后在这个浮动元素的父元素上加上了 clearfix
这个 class
,果然,按钮能正常点击了。但这是为啥呢?我估摸着是下面的列表造成的,于是打开控制台开始查看元素及其样式。我将问题的相关代码提取并简化如下:
<button onclick="alert('点击了新增按钮~')">新增</button>
<div class="box">
<div class="content"></div>
</div>
button {
float: left;
cursor: pointer;
}
.box {
position: relative;
}
.box .content {
position: relative;
height: 100px;
background-color: rgb(163,187,219);
clear: both;
}
上面的代码中,我对 button
元素设置了 float: left;
,起初,并没有这行代码,效果也是正常的:
但当我加上 float: left;
后,就点击不了按钮了:
或许你已经发现问题出在哪了,是的,虽然 div.box
元素的直接子元素 div.content
元素设置了 clear: both;
清除浮动,让 div.content
元素移动到了在它之前的浮动元素(button
)下面,但由于 div.content
元素的父元素(即按钮下面的 div.box
元素)没有清除浮动,而它又是定位元素(position
不为 static
),定位元素默认情况下会层叠在浮动元素上面,最终导致虽然能看到按钮,但按钮上面其实被下面的定位元素盖住了,所以点击不到按钮。
我们可以通过给 div.box
元素设置背景进行验证:
.box {
position: relative;
background: rgb(230,119,98);
}
效果如下:
可以看到,按钮的确是被盖住了。
好了,知道了问题产生的原因,就可以对症下药了,这里提供两种解决方案:
-
方案一:清除浮动
-
在
div.box
元素上清除浮动:.box { position: relative; clear: both; }
或者给
button
元素再包裹一层,并在这一层上添加前面编写好的clearfix
类(.clearfix::after
):<div class="clearfix"> <button onclick="alert('点击了新增按钮~')">新增</button> </div>
-
-
方案二:修改
z-index
-
修改
div.box
元素的CSS
属性z-index
的值,z-index
的默认值是auto
,相当于是0
,我们可以将其改小一点,比如改为-1
,这样定位元素div.box
就会跑到按钮下面去了:.box { position: relative; z-index: -1; }
-
现在,就不存在按钮浮动后点不了的问题了
如果你还有其它想法,欢迎在评论区与我互动~