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

Posted 2021-02-28 bien94

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

　　1、z-index属性

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

　　2、说明

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

值	描述
auto	默认。堆叠顺序与父元素相等。
number	设置元素的堆叠顺序。
inherit	规定应该从父元素继承 z-index 属性的值。