绝对定位的盒子的z-index值与有定位属性的父元素的z-index有关

2016-12-22_223749.jpg


今天晚上解决的一个音乐播放列表滚动到顶部,会被幻灯片遮挡的小bug。音乐列表做了绝对定位,z坐标值改的很大,但还是会被幻灯片遮挡住,原来做了绝对定位的盒子的z-index值与有定位属性的父元素的z-index有关,只改自身的值并不起作用。


引申知识:CSS隐藏元素 display visibility opacity的区别


{ display: none; /* 不占据空间,无法点击 */ } 


{ visibility: hidden; /* 占据空间,无法点击 */ } 


{ position: absolute; top: -999em; /* 不占据空间,无法点击 */ } 


{ position: relative; top: -999em; /* 占据空间,无法点击 */ } 


{ position: absolute; visibility: hidden; /* 不占据空间,无法点击 */ } 


{ height: 0; overflow: hidden; /* 不占据空间,无法点击 */ } 


{ opacity: 0; filter:Alpha(opacity=0); /* 占据空间,可以点击 */ } 


{ position: absolute; opacity: 0; filter:Alpha(opacity=0); /* 不占据空间,可以点击 */ } 


回到

顶部