css - 标题中的可点击图像

Question

我一直在尝试将可点击的图像插入到标题中以位于右下角。我一直在搜索您过去的问题，并且通过浏览已发布的内容已经走到了这一步。但是，我可以在没有正确链接的情况下获得使用此代码的样式:

header {

 <style> 
 div#button 
     {
     position:relative;
    align:right;
    top:111px;left:640px; margin:0;width:100%;
    padding-bottom:25px;
   }

</style> 

***position is right, but linkage is wrong***
<div id="button">
  <a href="0379a5a.netsolhost.com/wordpress1/products/products-page/" >  
<img src="http://0379a5a.netsolhost.com/wordpress1/wp-content/uploads/2013/07/shop_now2.png" height="80.5x" width="163.5px" 
<div style="float:right;margin-top: 111px; margin-right: 50px; padding-bottom:16px;"

/></a>
</div>

但是链接不起作用。我可以获得工作链接，但随后样式随此代码消失:

 <style> 
 div#shop_now_button 
     {
     position: relative;
    float: right;
    margin-top: 111px;
    margin-left: 640px; 
    margin-right: 50px;

    width:100%;
    padding-bottom:25px;
   }

</style> 


<div id="shop_now_button">
<div style="float:right;margin-top: 111px; margin-right: 50px; padding-bottom:16px;">   
<a s href="http://0379a5a.netsolhost.com/wordpress1/product/products-page/" target="_blank"> 
<img src="http://0379a5a.netsolhost.com/wordpress1/wp- content/uploads/2013/07/shop_now2.png" 
 height="80.5px" 
  width="163.5px"  
 float="right" 
 margin-top="111px" 
 margin-right="50px" 
 padding-bottom="16px" /> 
  </div>

我只是希望我知道发生了什么。几个小时以来我一直在解决问题...(如果它是一个简单的解决方案，我深表歉意——我是新手)这是我的虚荣域... http://0379a5a.netsolhost.com/wordpress1/

Answer 1

使用:

.header {position: relative;}
.header img {positon: absolute; bottom: 0; right: 0;}