JQuery与CSS之图片上放置button

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

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 class='hide-650 fade5' "+

                    "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 class='contactus' style='font-size:26px;'>试 看</span> <span class='glyphicon glyphicon-play' style='font-size:20px;top:0;bottom:2px;'></span> </a>"

                    );

        }

页面：

<div class="es-row-wrap container-gap course-cover">

    <div class="row row-5-7 course-cover-heading">

      <div id="coursePicture" class="col-sm-5 picture hidden-xs" style="position: relative;">

        <#if course.coverImage?has_content>

          <img src="${course.coverImage}" class="img-responsive" width="436px" height="245px" />

        <#else>

          <img src="/resources/assets/img/default/course-large.png" class="img-responsive" />

        </#if>

      </div>

    </div>

 </div>

另外一种写法：

//在课程图片上放置按钮

        /*  <a class="button hide-650 fade5" href="#modal" data-toggle="modal" data-url="/course/hyjgz2np/lesson/preview?lectureId=hyjgz2np0.49618492345325650.04212287697009742"> <span class="contactus"><strong>试看</strong></span>  </a>

         */

        //$("#coursePicture").append("<a class='btn btn-sm btn-info' href='#' style='top:120px;left:180px;position:absolute;z-index:100;'>试看</a>");

        var freeOne="";

        freeOne=$(".freePreviewOne").attr("data-url");

        if(freeOne==null){

            //没有免费视频

        }else{

            $("#coursePicture").append("<a class='freePreviewPicture hide-650 fade5' "+

                    "href='#modal' data-toggle='modal' "+

                    "data-url='"+freeOne+"'> "+

                    "<span class='contactus' style='font-size:26px;'>试 看</span> <span class='glyphicon glyphicon-play' style='font-size:20px;top:0;bottom:2px;'></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 class="es-row-wrap container-gap course-cover">

    <div class="row row-5-7 course-cover-heading">

      <div id="coursePicture" class="col-sm-5 picture hidden-xs" style="position: relative;">

        <#if course.coverImage?

has_content>

          <img src="${course.coverImage}" class="img-responsive" width="436px" height="245px" />

        <#else>

          <img src="/resources/assets/img/default/course-large.png" class="img-responsive" />

        </#if>

      </div>

    </div>

 </div>