z-index属性解决样式被遮挡的问题

  有这样一个场景,在页面的右上角有一个固定位置的按钮,当不拉动垂直滚动条时,该按钮是可以接受鼠标响应的;但是当将垂直滚动条拉到最底端时,该按钮就不能响应鼠标操作了,此时该按钮的样式已经被下部分内容的样式遮挡了,此时我们可以通过一个z-index属性来解决该问题,只要在右上角固定的按钮的样式中添加z-index属性,并设置个较大的值即可,例如:"z-index:999"

  1、z-index属性

  • 该属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
  • 该属性值可以为负数,表示元素拥有较低的优先级。
  • 该属性仅仅在定位元素上生效,例如:position:fixed 或者position:absolute

  2、说明

  z-index属性设置一个定位元素沿 z 轴的位置,z 轴定义为垂直延伸到显示区的轴。如果为正数,则离用户更近,为负数则表示离用户更远。

描述
auto 默认。堆叠顺序与父元素相等。
number 设置元素的堆叠顺序。
inherit 规定应该从父元素继承 z-index 属性的值。
posted @ 2020-04-17 08:59  晒太阳的兔子很忙  阅读(1848)  评论(0编辑  收藏  举报