1.如果想让图片位于文字之后显示，即文字占前边，
如下代码所示：
<body>
<img src="dog.jpg" alt="" />
<p>保护动物，人人有责！</p>
</body>
<style>
img{
width:100px;height:100px;
z-index:-1;
}
</style>
注意：由于在上述例子img标签元素设置了z-index属性，即显示元素相对应的优先级，
值-1即表示优先级滞后一级。
2.position定位元素
四个属性值fixed、static、absolute、relitive
<1> position：fixed;
表示定位为固定，相对于浏览器窗口，如果界面出现滚动趋势，所对应元素仍然不会改变其位置。
代码如下：
p{
position:fixed;
top:20px;
left:100px;
}
<p>好好学习，天天向上！</p>
即所对应文字永远在浏览器界面上20px，左边100px位置。
<2>position:static
表示静态定位，默认值，不受top、right、bottom、left值的影响。
<3>position:absolute;
表示绝对定位，其位置相对于最近的父元素的位置，
代码如下：
<style>
h2{
position:absolute;
left:100px;
top:150px;
}
</style>
<body>
<h2>This is a heading with an absolute position</h2>
<p>用绝对定位,一个元素可以放在页面上的任何位置。标题下面放置距离左边的页面100 px和距离页面的顶部150 px的元素。</p>
</body>
<4>position:relitive;
即为相对定位元素，相对的是正常的位置。
代码如下：
h2.pos_left{
position:relative;
left:-20px;
}
h2.pos_right{
position:relative;
left:20px；
}
3.overflow 属性规定当内容溢出元素框时发生的事情。
两个属性：scroll、hidden；
overflow：scroll；表示如果元素过多出现溢出时，即会出现相对应的滚动条；
overflow：hidden；表示溢出元素时，对滚动条进行相对应的隐藏。
4.cusor 属性值表示鼠标移动时所出现的图形的不同；
cusor：pointer；类似于手掌形状；
cursor：wait；类似于加载点击时的等待的形状。
5.float 属性为浮动，
float：left；
float：right；
清除浮动时，用到clear，即clear：both；
.thumbnail
{
float:left;
width:110px;
height:90px;
margin:5px;
}
.text_line
{
clear:both;
margin-bottom:2px;
}
<img class="thumbnail" src="dog1.jpg" alt="" />
<img class="thumbnail" src="dog2.jpg" alt="" />
...
<p class="text_line">第二行</p>
