最近在做项目的时候,datePiker弹出框被下面的div给遮挡住了,以前也碰到过这样类似的问题,之前直接在style中添加"z-index:1000"。但是现在使用angular指令,在网上找了好多例子,有直接修改css的,也有在options添加zIndexOffset的,这样对于我的项目都不适用。
后来查看datepiker的源码,发现其z-index是在其父div的基础上+1。这样就不难发现,只要将其父div的z-index设置的合适就不会出现遮挡问题。下面附上对z-index的详细解释。
z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
层级关系的比较
1. 对于同级元素,默认(或position:static)情况下文档流后面的元素会覆盖前面的。
2. 对于同级元素,position不为static且z-index存在的情况下z-index大的元素会覆盖z-index小的元素,即z-index越大优先级越高。
3. IE6/7下position不为static,且z-index不存在时z-index为0,除此之外的浏览器z-index为auto。
4. z-index为auto的元素不参与层级关系的比较,由向上遍历至此且z-index不为auto的元素来参与比较。
顺序规