z-index 有什么作用? 如何使用?

z-index 有什么作用?

可以解决元素的覆盖问题,决定那个元素在上方,哪一个在下方;
z-index的值可以是负数,也可以为0,也可以无群大,数值大的在上方;
z-index父元素设置的值权重比较大,当两个父元素相比的时候,父元素起决定作用,其中的子元素设置多大都没有用;

如何使用?

正常情况下:可以看到灰色覆盖了粉色元素


定位004.png

在box2加入z-index属性,并且设置为负数;显示为粉色在上,灰色在下;


定位005.png

在box1和box2中都添加z-index属性;显示为粉色在上,灰色在下;


定位006.png

设置三个box,给三个分别设置z-index属性;显示按照z-index属性的值最高的在上边,最低的在下边;


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

推荐阅读更多精彩内容

  • 因为显示器是显示的图案是一个二维平面,拥有x轴和y轴来表示位置属性。为了表示三维立体的概念如显示元素的上下层的叠加...
    Maggie_77阅读 2,727评论 0 0
  • HTML 5 HTML5概述 因特网上的信息是以网页的形式展示给用户的,因此网页是网络信息传递的载体。网页文件是用...
    阿啊阿吖丁阅读 4,097评论 0 0
  • 今天给大家分享一下,z-index和层叠上下文如何形成的? 1.背景介绍 层叠上下文,就是在呈现的时候决定哪个元素...
    慕瑾大大阅读 1,647评论 0 0
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,825评论 1 92
  • 重叠的元素--z-index属性 首先声明:z-index只能在position属性值为relative或abso...
    玉面小猿阅读 714评论 0 1