本文介绍了在图像上方滑动滑块文本的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧! 问题描述 29岁程序员,3月因学历无情被辞! 我试图制作一个非常普通的旋转木马,在垂直中间的两侧有两个箭头,图像顶部的中间有一个按钮。尽管箭头和文字都是绝对的,并且具有更高的Z指数,但我无法在图像上显示任何内容。这是我的代码codepen。 http://codepen.io/kathryncrawford/pen/AXmVAz 这里是我的HTML < div class =slick-slider> < div> < img class =img-fluidsrc =http://www.placecage.com/1500/750alt => < div class =info> < h1 class =slider-heading>标题< / h1> < p class =slider-subheading lead>副标题< / p> < p class =down-arrow> < a class =btn btn-large btn-down-arrowhref =#theend> < i class =fa fa-chevron-down fa-lgaria-hidden =true>< / i> < / a> < / p> < / div> < / div> < div> < img class =img-fluidsrc =http://www.placecage.com/1500/750alt => < / div> < div> < img class =img-fluidsrc =http://www.placecage.com/1500/750alt => < / div> < / div> 我的CSS(光滑的css不在这里,但它在codepen中) .slick-slider img {/ *保留图片全屏* / width:100%; } .chevron-container {/ *用于V形臂的完整滑块高度容器* / height:100%; 位置:绝对; width:100px; } .slick-right {/ *向右右箭头* / 右:0; top:0; } .chevron-container> 。{/ *垂直中心的位置V形* / 底部:0; 颜色:白色; font-size:10em; 身高:1em; margin:auto; 位置:绝对; top:0; width:5em; z-index:10; } .slick-slider .info {颜色:白色; 位置:绝对; 宽度:100%; 身高:100%; top:0; 剩下:0; line-height:100vh; text-align:center; z-index:10; } .slick-slider .info> div { display:inline-block!important; vertical-align:middle; } 而我的JS jQuery(函数($){ $('。slick-slider')。slick({可访问性:true, adaptiveHeight:true , arrows:true, infinite:true, mobileFirst:true, nextArrow:'< div class =chevron-container slick-right>< i class =fa fa-chevron-rightaria-hidden =true>< / i>< / span>< span class =sr-only>下一个< / span>< / div> ;', prevArrow:'< div class =chevron-container>< i class =fa fa-chevron-leftaria-hidden =true>< / i><< ; / span>< span class =sr-only>上一个< / span>< / div>', slidesToShow:1 }); }); 解决方案您必须这样做 .slick-slide { / * ... * / 位置:相对; } 这样 .info 东西知道它应该完全定位到它的父母。 I'm trying to make a pretty normal carousel, with two arrows on either side in the vertical middle, and text with a button in the middle on top of the image. I cannot get anything to appear on top of the image though, even though the arrows and text are all absolute and have a higher z-index. Here's a codepen with my code. http://codepen.io/kathryncrawford/pen/AXmVAzAnd here's my HTML<div class="slick-slider"> <div> <img class="img-fluid" src="http://www.placecage.com/1500/750" alt=""> <div class="info"> <h1 class="slider-heading">Heading</h1> <p class="slider-subheading lead">Subheading</p> <a class="btn btn-large btn-danger" href="">button text</a> <p class="down-arrow"> <a class="btn btn-large btn-down-arrow" href="#theend"> <i class="fa fa-chevron-down fa-lg" aria-hidden="true"></i> </a> </p> </div> </div> <div> <img class="img-fluid" src="http://www.placecage.com/1500/750" alt=""> </div> <div> <img class="img-fluid" src="http://www.placecage.com/1500/750" alt=""> </div></div>My CSS (the slick css is not included here, but it is in the codepen) .slick-slider img { /* keep images full screen */ width: 100%; } .chevron-container { /* full slider height container for chevrons */ height: 100%; position: absolute; width: 100px; } .slick-right { /* keeps right arrow to the right */ right: 0; top: 0; } .chevron-container > .fa { /* positions chevrons in vertical center */ bottom: 0; color: white; font-size: 10em; height: 1em; margin: auto; position: absolute; top: 0; width: 5em; z-index: 10; } .slick-slider .info { color: white; position: absolute; width: 100%; height: 100%; top: 0; left: 0; line-height: 100vh; text-align: center; z-index: 10; } .slick-slider .info > div { display: inline-block !important; vertical-align: middle; }And my JSjQuery(function($){ $('.slick-slider').slick({ accessibility: true, adaptiveHeight: true, arrows: true, infinite: true, mobileFirst: true, nextArrow: '<div class="chevron-container slick-right"><i class="fa fa-chevron-right" aria-hidden="true"></i></span><span class="sr-only">Next</span></div>', prevArrow: '<div class="chevron-container"><i class="fa fa-chevron-left" aria-hidden="true"></i></span><span class="sr-only">Previous</span></div>', slidesToShow: 1 });}); 解决方案 You have to do .slick-slide { /* ... */ position: relative;}so that the .info stuff knows it should be absolutely positioned to it's parent. 这篇关于在图像上方滑动滑块文本的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持! 上岸,阿里云!