position:relative日常应用的时候一般是设置给position:absolute;的父层的,
父层position:relative; 子层position:absolute;的话, 就是依照父层的边界进行定位的,
不然position:absolute 会逐层向上寻找设置了position:relative的元素边界, 直到body元素..
第一种写法（连同CSS一起追加进去）
var freeOne=""; freeOne=$(".freePreviewOne").attr("data-url"); if(freeOne==null){ //没有免费视频 }else{ $("#coursePicture").append("<a "+ "style='top:94px;left:150px;position:absolute;z-index:100; " + " width: 180px;height: 60px;border: 2px solid white;" + "display: block;color: white;text-decoration: none;" + "letter-spacing: 1px;font-size: 16px;line-height: 20px;" + "text-align:center;padding-top:18px;" + "background-color: rgba(0, 0, 0, 0.44);" + "-webkit-backface-visibility: hidden;-webkit-transition: all .3s ease-in-out;" + "-moz-transition: all .3s ease-in-out;-ms-transition: all .3s ease-in-out;" + "-o-transition: all .3s ease-in-out;" + "border-radius: 10px;'"+ "href='#modal' data-toggle='modal' "+ "data-url='"+freeOne+"'> "+ "<span>试 看</span> <span></span> </a>" ); }
页面：
<div> <div> <div> <#if course.coverImage?has_content> <img src="https://www.jb51.net/${course.coverImage}" /> <#else> <img src="https://www.jb51.net/resources/assets/img/default/course-large.png" /> </#if> </div> </div> </div>
第二种写法：
//在课程图片上放置按钮 /* <a href="#modal" data-toggle="modal" data-url="/course/hyjgz2np/lesson/preview?lectureId=hyjgz2np0.49618492345325650.04212287697009742"> <span><strong>试看</strong></span> </a> */ //$("#coursePicture").append("<a href='#'>试看</a>"); var freeOne=""; freeOne=$(".freePreviewOne").attr("data-url"); if(freeOne==null){ //没有免费视频 }else{ $("#coursePicture").append("<a "+ "href='#modal' data-toggle='modal' "+ "data-url='"+freeOne+"'> "+ "<span>试 看</span> <span></span> </a>" ); }
页面：
<style> .freePreviewPicture{ top:94px; left:150px; position:absolute; z-index:100; width: 180px; height: 60px; border: 2px solid white; display: block; color: white;text-decoration: none; letter-spacing: 1px;font-size: 16px; line-height: 20px; text-align:center;padding-top:18px; background-color: rgba(0, 0, 0, 0.44); -webkit-backface-visibility: hidden; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; border-radius: 10px; } </style> <div> <div> <div> <#if course.coverImage?has_content> <img src="https://www.jb51.net/${course.coverImage}" /> <#else> <img src="https://www.jb51.net/resources/assets/img/default/course-large.png" /> </#if> </div> </div> </div>
运行效果图如下：
