hover和position共用出现的问题

hover  鼠标移入的样式

position  定位属性 包含 relative  相对定位   absolute  绝对定位为     fixed 固定定位

hover作用范围

可以实现自己样式的改变:使。.box背景颜色变红

.box：hover{background-color:red}

也可以实现包含关系的样式改变;鼠标移入.box 使其子元素.sox背静颜色变红

.box:hover .sox{ background:red}；

实现兄弟元素样式变化；.sox与.box相邻并且兄弟关系；

.box:hover+.sox{background:red}====》延深兄弟的兄弟

.box:hover+.sox+.mox{background:red}；

position: 定位中存在层级的概念 ；普通文档流层级z-index为0；

1.如果网页中所有元素全部设置定位且都有层级 hover只能作用到层级最大的元素；

如果网页中存在非定位元素 即网页中的元素层级含有大于等于0的元素；则hover只能作用在文档流及以上；

z-index<0  无法使用hover 事件；

2.具有包含关系的元素；且都有定位属性；

子元素的层级会依赖于父元素层级     即永远位于子元素上         子元素z-index=父元素z-index  即使设置子元素也无效