码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2020-04-17 09:33:28      阅读:250      评论:0      收藏:0      [点我收藏+]

标签:auto   ble   响应   生效   场景   拉动   定义   鼠标   解决   

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

  1、z-index属性

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

  2、说明

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

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

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

标签:auto   ble   响应   生效   场景   拉动   定义   鼠标   解决   

原文地址:https://www.cnblogs.com/bien94/p/12717536.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!