Html5元素布局
本教程十分簡單，適合新手（因為我也是新手）。本教程參考了“菜鳥教程”。
筆者希望做到元素相對於瀏覽器的角落布局，即九個典型位置：
這個理念其實和UE4中的UMG錨定一樣。Html5中以position來決定布局樣式。
第一種：static 定位
HTML元素的默認值，即沒有定位，元素出現在正常的流中。靜態定位的元素不會受到 top, bottom, left, right影響。所謂的流，其實就像寫word一樣，按照從左到右，從上到下的順序寫元素。
第二種：fixed定位
使用這種方法可以做到針對瀏覽器的窗口定位（不管這個頁面是否在滾動，位置都不變），適合用來做角落廣告。語法如下
.someclass{//註：這個是左下角錨定的例子
position:fixed;
left:0px;
bottom:0px;
}
示例：頂部居中錨定的做法
<!DOCTYPE HTML>
<html>
<head>
<title>
T
</title>
<meta charset = "UTF-8"/>
</head>
<style type="text/css">
.I {
position: fixed;
left: 50%;
transform: translate(-50%, 0%);
}
</style>
<body>
<img class="I" src="c.png"/>
</body>
效果圖：
示例：居中錨定
<!DOCTYPE HTML>
<html>
<head>
<title>
T
</title>
<meta charset = "UTF-8"/>
</head>
<style type="text/css">
.I {
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
</style>
<body>
<img class="I" src="c.png"/>
</body>
第三種：absolute定位 這種是定位在父元素的相對位置中，也是非常方便的。
第四種：relative定位 這種是定位在原本正常顯示的位置後，發生偏移的樣式。
Html5元素布局