点赞（相对定位相对路径闭包）

position （定位）属性值的含义：

static

元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。

relative （相对定位）

元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。

相对自身原来的位置进行偏移，设置left、right、top、buttom

注：设置相对定位的盒子会对它原来的位置指定偏移到达心得位置，设置相对定位的盒子仍在标准流中，他对父级盒子和相邻都没有影响

例：距离顶部40px

position: relative;
top: 40px;

absolute（绝对定位）注：绝对定位必须有一个父级是相对定位

元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。

绝对定位属性设置left、right、top、buttom使用绝对定位以一个离它最近的一个已经定位的祖元素为基准进行偏移，如果没有已经定位的祖元素以浏览器窗口为基准进行定位

绝对定位的元素从文档流中脱离，对其它元素的定位不会造成影响

z-index=999；设置各元素之间重叠的高低     仅能在定位元素上奏效

fixed（固定定位）

元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。

相对路径

<a href="3.html">同目录下文件间互相链接</a>

../ 代表一级上级目录(间隔一个目录) ../../代表二级上级目录(间隔两个目录) 

<a href="../../链接.html">链接到上级目录的上级目录中的文件</a>

绝对路径就是带有网址的路径，比如你有一个域名www.dreamdu.com

例子：<a href="http://www.dreamdu.com/exe/1.html">链接到1.html</a>

 

点赞

body

<div class="img">
<img src="../H5结构布局实例/img/0.jpg">
<img id="clickme" class="svg" src="../H5结构布局实例/img/心.svg">
<span id="message"> </span>
</div>

style

<style type="text/css">
div{
margin:10px;
padding: 10px;
width: 300px;
height: 350px;
border: 1px solid red;
position: relative;
}
img{
width: 300px;
height: 300px;
}
.svg {
width: 45px;
height: 45px;
position: absolute;
right: 15px;
bottom: 15px;
cursor:pointer;
}
span{
position: absolute;
right:1px;
bottom: 5px
}
</style>

  j s 

<script type="text/javascript">
// 使用闭包
window.onload=function(){
var count=0;
var divs=document.getElementById("message");
var button=document.getElementById("clickme");
button.onclick=function(){
count++;
divs.innerHTML= count ;
};
}
</script>