基础学习第三天(关于z-index层级关系)

重要：
层级：z-index；使用条件--------除了定位的static以外，其它定位都可以触发这个属性；浮动、标准盒子无属性；
使用场景及注意事项：
1.默认不设值后来的盒子居上(上层)；
2.父亲设置了z-index
*子级无法放在父级下方(无论子级的z-index为何值)；
**拼爹效应：其中一个父级小于另一个父级，那么前者子级的z-index无论为何值都不会超过另一个父级的子级的层级；
关于z-index层级不起效果的问题：

1. 元素本身有浮动；

2. 没加定位。
   有层级效果时注意hover使用在子级用padding撑大盒子以致与父盒子宽高一样。例如我们在做头部导航栏时，用hover显示二级菜单的选项块时：

3. 用li标签进行浮动，利用padding可使li标签文字居中

4. a标签用

a {
	width: 100%;
	height: 100%;
	padding: x y;
	display: inline-block;
	position: relative;
	z-index: 1;
}`

这里x代表li标签垂直padding值，y为水平padding值；
3. 我们要给显示的二级菜单块设大小、border值再用定位，父级即li标签用相对定位，本身用绝对定位，这里的层级应比a低，才能使hover后的a标签的背景覆盖住二级菜单的border；
4. 效果hover要加在li标签上：

li:hover {
	background-color: #fff;
}
li:hover a {
	background-color: #fff;
}