在div內任意移動編輯物件： position: absolute

基礎概念講解：click for video!!

平面作品參考範例：

數位作品實作示範：

石碇之水

那年的冬季，水清的是一種無法想像。看著天空的顏色在轉化。

藍的與白的，是一種交相印。

教學video:

範例使用 CSS：

<style>
/*主DIV*/
.maindiv01 {
position: relative;
border: 0px solid orange;
}

/*標題大字*/
.divwordbig {
font-family: Verdana, '微軟正黑體';
font-size: 3.4em;
font-weight: bold;
line-height: 1.6em;
text-align: left;
color: green;
text-shadow: 2px 2px 2px black;
}

/*中間內文*/
.divwordsmall {
font-family: Verdana, '微軟正黑體';
font-size: 1.04em;
font-weight: bold;
line-height: 1.8em;
text-align: left;
background-color: whitesmoke;
width: 70%;
}

/*下面內文*/
.divwordsmall02 {
font-family: Verdana, '微軟正黑體';
font-size: 1.04em;
font-weight: bold;
background-color: lightgreen;
position: absolute;
top: 290px;
left: 185px;
}

/*第一張照片*/
.popic01 {
position: absolute;
left: 240px;
top: -10px;
}

/*第二張照片*/
.popic02 {
position: absolute;
left: 260px;
top: 155px;
padding: 3px;
background-color: whitesmoke;
-webkit-transform: rotate(-5deg);
-webkit-box-shadow: 2px 2px 2px 2px silver;
}

/*主div背景圖*/
.bacimg {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXuypCTBLgUE8Uzgtmk5CBLe_qmT2J5nNApg1Dv6kVuYc4DApKLm3EnCbRyKArw2UX-kq147j3aYL1LzVI_6lYKxAA5Znd0aaN-SVWpTm8RAUwZPuubjTFLcnjOOm9afMmfynaufD8AI4/w684-h456-no/IMG_1076.JPG);
background-repeat: no-repeat;
background-position: left bottom;
background-size: 455px;
}
</style>

範例補充用 互動CSS：

.popic01:hover {
border: 1px solid transparent;
padding: 3px;
background-color: whitesmoke;
-webkit-box-shadow: 1px 1px 1px 2px silver;
}