本次作品用到的知識：絕對定位（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;
}
