z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。默认是0,最高无限制(但是一般最多到999)。
注意:
1、元素可能有负的 z-index 属性值
2、z-index 仅能在定位元素上有效
| 值 | 描述 |
| auto | 默认。堆叠顺序与父元素相等。 |
| number | 设置元素的堆叠顺序。 |
| inherit | 规定应该从父元素继承 z-index 属性的值。 |
其实就是一个“图层”的概念。元素是一层一层的,z-index 设置的值越大,离用户越近。
示例
创建两个图片,定位在同一位置,现在 img 被 img2 “挡住了”
Title
给 img 属性添加 z-index 使它的层级在 img2 的上面,可以显示出来
#img {
z-index: 1;
}
透明度 opacity
opacity 属性设置元素的不透明度。
| 值 | 描述 |
| value | 规定不透明度。从 0.0(完全透明)到 1.0(完全不透明) |
| inherit | 应该从父元素继承 opacity 属性的值。 |
示例
Title
添加 img 一个 opacity: 0.5; 样式后
img {
opacity: 0.5;
}



