本次作品用到的知识：绝对定位（absolute）、相对定位（relative）、box居中显示（margin: 0 auto;）。
如果设置了absolute属性的元素的设置了定位属性(position)，那么它就以它的父元素为参考定位。如果它的父元素没有设置定位属性(position)，那么它就以它就近的设置了定位属性（position）的元素为参考定位。如果只有它设置了定位属性，那么它就以<body>为参考定位。
本作品完整代码：点击查看本作品完整代码
作品效果：
1、相对定位
答：position: relative; 是以元素在文档流的位置作为参考定位的。
2、关于.preamble、.sidebar中背景图片
答：background: url() no-repeat top;当是这样定义背景图片时，那么就没有达到想要的效果，这样的话底部的样式被挡着了。
需要改成：background: url() no-repeat bottom；那么顶部的部分图片被挡着，底部的“花”的部分露出来，就是想要的样式。
3、对于一些布局，如：
左边的为图片，这种布局，可以不用定义<img>来填装这个图片，只需要为右边的文本的box设置背景图片，使用margin、padding属性来设置，将文本内容"挤"到右边去。
如代码：
.participation {
margin: 35px 0 0 150px;
background: url("../images/Participation.gif") no-repeat left top;
}
.participation p {
margin: 0 50px 0 160px;
}
