z-index用法

再次看z-index,发现z-index其实有一些禁忌和注意事项;

z-index只对定位元素有效;

在两个元素重叠的情形下:

对于兄弟元素:

1:
定位 -------一致
z-index ---------一致

先后顺序 后出现的覆盖先出现的

2:

定位 -------定位元素覆盖未定位元素
z-index ---------一致

先后顺序-------一致

3:

定位---------一致
z-index ---------大值覆盖小值
先后顺序-------一致

对于父子元素

1:父元素z-index有效:
子元素覆盖父元素

2:父元素z-index失效(未设置z-index或者未定位):
以子元素z-index为准;

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,790评论 1 92
  • 一、定义: z-index 只适用于元素有定位的情况,表示层级 数值越大 层级越高 展示的位置越靠前。 二、用法:...
    王阿王阅读 983评论 0 0
  • 参数 如果不传递任何参数给 .index() 方法,则返回值就是jQuery对象中第一个元素相对于它 同辈元素 ...
    panw3i阅读 591评论 0 0
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,610评论 1 45
  • 在看CS231n的时候,有这么一行代码 it = np.nditer(x, flags=['multi_index...
    赤乐君阅读 10,839评论 0 7