前端----CSS 父元素在子元素之上显示

今天做练习想让父元素在上覆盖子元素的边框,

在网上查了些资料, 发现了一种办法能让父元素靠上显示,

把子元素的z-index值设为负数 (position不能是默认值,z-index对定位属性生效)

 

 

但是这样有个弊端,我的练习是onmouseover事件,当鼠标悬停在该元素或子元素时生效,

当我设置子元素的z-index值为负以后发现onmouseover事件对于其子元素不起作用了,

我做了很多尝试, 

把z-index设为正值,但是父元素的值比子元素大, 结果还是子元素在上,

网上查了些资料说是 z-index针对于同级的定位元素生效, 不针对父子元素,

就算父元素z-index值大也是在下边, 但是把子元素z-index值设成负值确实能达到父元素在子元素之上的效果.

 

原理还是不太懂, 有知道的大神请指点一二