I have a set a negative top margin (-15px) to an image and it works fine. But the problem is the click event. The click is still working just below (i.e. +15px below from the view where exactly image is on the browser) the image.
\[code\]<div data-role="page" > <!-- Header --> <div data-role="header" class="listHeader" data-position="fixed" data-tap- toggle="false"> <img src="http://stackoverflow.com/questions/13716405/images/all_lists_normal.png" class="view_list"> <img src="http://stackoverflow.com/questions/13716405/images/x_normal.png" class="x_image"> <div class="titleList"> <p id="page_title" class="label"></p> </div> <img id="id_new_products" src="http://stackoverflow.com/questions/13716405/images/add_products_normal.png" class="addNewItemImage_page4"> <img id="id_find_stores" src="http://stackoverflow.com/questions/13716405/images/find_store_normal.png" class="addNewItemImageMargin"> </div> <!-- / header --> <!-- Content --> <div data-role="content" class="mainBackground"> some content.... </div></div>.listHeader {background: url(../images/header_nologo.png) no-repeat 50% 0px;background-size: 100% 107%;height: 60px;}.view_list {float: left;margin-top: 12px;}.x_image {float: right;margin-right: 15px;margin-top: 17px;}.addNewItemImage_page4 {min-width: 100%;margin-top: 9px;position:relative;}.addNewItemImageMargin {min-width: 100%;margin-top: -14px; /****************** PROBLEM ***********/position:relative;}.mainBackground {background: url(../images/background.jpg) no-repeat 50% 0px;background-size: 100% 100%;min-height: inherit;min-width: 100%;margin-top: -2px;}\[/code\]