相对定位、绝对定位
准备工作
background:url('images/grass.png')
<p>将上次的土块模型中的background换成土块
在css块状结构中换背景图
但是将图形放上去以后被拉升了
要使图像像素保持不变，有一个css的background-size来限定
</p>
background-size: contain;是限定在盒装大小之内
这是现在的效果图
最后一步：在顶上放一朵小花
image.png
在css中写了一朵花的样式，然后在HTML中加入新的标签样式
准备工作完成
相对定位
目标：把花移动到第二层空白的位置
相对定位：定位系统的参照坐标系和坐标点
相对于自己之前本应该在的位置的偏移量
左上角
距离顶部偏移64px，距离左侧偏移128px
position: relative;
left: 64px;
top:64px;
偏移后的位置
之前的空白占位不会消失
绝对定位
新增了一个小黄花的样式，将在两个土块之间，用绝对定位看看会发生什么把
position: absolute;
在css中加入一行代码后小黄花的占位消失了
image.png
原始
改成abusolute占位以后原有的占位就不存在了
偏移之后发现小黄花的红点占位并不在空白的位置，说明便宜还是有问题的
问题的原因是yellow-flower的父级没有定义是absolute还是relative
定位父级bg后
出现刚刚偏差的原因：当上次没有定义是绝对还是相对的时候就会往上追溯，刚才BG的父级是body，由于默认的margin不为0，就有了8px的偏差
基于定位的居中
body{ margin:0;
background:url('images/brick.jpg');
background-size:150px 150px;}
居中定位之前的准备工作
加一个画框和一个背景墙
用绝对定位的百分百
内层元素处于外层元素的50% 的位置
要先把定位方式改成absolute
position: absolute;
left:50%;
top:50%;
css的缺陷
用transform属性修改定位点的位置
transform: translate(-50%,-50%);
侯爵老师的小讲解
