Place a button on a picture of jquery and CSS

Position:relative is usually set to Position:absolute in the daily application,
Parent layer position:relative; The position:absolute of the child layer, which is positioned according to the boundary of the parent layer,

Otherwise, the Position:absolute will look up and down to set the position:relative element boundary until the BODY element.

The first notation (appended with CSS)

var freeone= "";        freeone=$ (". Freepreviewone"). attr ("Data-url"); if (freeone==null) {//No free video}else{$ ("#coursePicture"). Append ("<a class= ' hide-650 fade5 '" + "style= ' top:94px;left:150px;position:absolute;z-index:100;" + "Width:180px;heig                    ht: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:2 6px; ' > Preview </span> <span class= ' Glyphicon glyphicon-play ' style= ' font-size:20px;top:0;bottom:2px; '        ></span> </a> "); }

Page:

<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>                  < #else >                  </#if >      </div>    </div> </div>

The second way:

Place the button/* <a class= "button hide-650 fade5" href= "#modal" data-toggle= "modal" data-url= "/course/hyjgz2np/l" on the course picture esson/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; '        > Preview </a> ");        var freeone= "";        freeone=$ (". Freepreviewone"). attr ("Data-url"); if (freeone==null) {//No free video}else{$ ("#coursePicture"). Append ("<a class=" Freepreviewpictur E hide-650 fade5 ' "+" href= ' #modal ' data-toggle= ' modal ' "+" Data-url= ' "+freeone+" ' &G T "+" <span class= ' contactus ' style= ' font-size:26px; ' > Preview </span> <span class= ' Glyphicon glyphicon-play ' style= ' font-size:20px;top:0;bottom:2px; '  ></span> </a> "                   ); }

Page:

<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>  < #else >  </#if > </div> </div> </div> 

Run:

Place a button on a picture of jquery and CSS