轮播图左右按钮被使用定位的图片压住,使用z-index,还是无法出现。制作方法是按照黑马程序员pink。
检查左右按钮z-index和图片盒子z-index,切换绝对定位相对定位试试
这里有很全的轮播图带源码
首先看下图片的z-index是多少,然后设置左右按钮大于它试试
加上 position: relative;
z-index: 999;
如果没有成功 就给轮播图这个盒子加上它
出现你这个情况的原因是虽然你对轮播图的按钮的标签加上了z-index的属性,但是这个按钮的标签的父级标签没有设置,而你添加了定位属性的图片的级别不是和轮播图按钮一个级别,而是与轮播图标签的父级便签或者更外层的标签是同一个级别,浏览器在渲染层级时的优先级这样的,我举个例子:
<div id="box1">
<div id="box3">你的轮播图按钮<div>
<div>
<div id="box2">
<img id="img1"> 你的添加了定位的图片</img>
<div>
这种情况下,如果你没有对任何盒子设置z-index,那么box1的层级为0,box2的层级为0,层级一样,但是box2写在后面,所以这时候如果box1和box2出现重叠,box2会在box1的上面,如果你对box1设置了更高的z-index,那么box1就会在上面.
如果是要对比box3与img1的时候,就不能像上面这么对比,因为他们不在同一个盒子内,所以他们的层级显示决定于他们的父级盒子,就是说,哪怕你对box3设置了无限大的z-index,但是他的父级box1比img1的父级box2的层级低,那么box3就永远都在img1的下面,想要box3在img1上面,你需要把box3的父级box1的层级设置得比img1的父级box2的层级高,就可以了