當我們把裡面的資料填上，
將進入還記得第一次進入body寫的是hello world，
但是這次，我們可以開始模仿一些網站的樣式，這叫做切版。
那些太艱深的網頁我們可以先不用管，
先找一個簡單的版型來切吧！
我們只需要切出樣子，把那些功能什麼的都先放一邊吧！
html裡面的各種element，
如果沒有給予他特別的位置，會依照左到右，上到下去排列。
因此沒有給予位置，有可能會造成版型破裂，稱為跑版、破版。
而定位的方法有很多種，
就讓我來一一介紹吧！
position有四種常用的屬性
-static
-relative
-absolute
-fixed
首先我們先開啟一個index.html，
在css資料夾中則有一個style.css，
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>test</title>
<link rel="stylesheet" href="css/style2.css">
</head>
<body>
<div class="site-header">9527</div>
</body>
</html>
style.css
body{
background-color:#999999;
}
.site-header{
background-color:#5f5f5f;
}
以上我們都設定好了
在Goolechrome打開時會是這樣
接下來，就來玩看看吧！
##static（預設值）
這個屬性代表的是預設值，不過既然是預設值，所以我們不需要寫。
.site-header{
background-color:#5f5f5f;
position:static;
}
顯示結果沒有變化。
.site-header{
background-color:#5f5f5f;
position:relative;
}
顯示結果依然沒有變化，不過其實是不一樣的。
當設定relative的時候就可以支援top、bottom、left、right等屬性。
此時我們加入
.site-header{
background-color:#5f5f5f;
position:relative;
top:50px;
left:50px;
}
就會變成這樣
表示我們的header距離上方50px，左方50px。
這時將relative改回static時，位移消失，
這是因為這些屬性在position:static是不支援的。
absolute並不會佔有同層元素的空間，而是被獨立出來。
這樣講一定很抽象吧，讓咱們上圖！
首先用先前教的shift+alt+a將9527註解。（即不會顯示）
再加入三個div如下：
index.html
<body>
<!-- <div class="site-header">9527</div> -->
<div class="red">9527</div>
<div class="green">9528</div>
<div class="blue">9529</div>
</body>
style.css
.red{
background-color: red;
}
.green{
background-color: green;
}
.blue{
background-color: blue;
}
就會顯示如下圖
這時我們在.green加入positon:absolute;
會發現綠色獨立出來了
9529（藍色）跑到綠色的下面，所以9528消失，
但是為何綠色變短了呢？
這是因為absolute如果沒有設定上下左右的距離，
預設是auto，就會自動找元素的邊界。
因此，後面的藍色會顯示出來。
有興趣的人可以在index.html的9529後面加0000，
就會發現藍色部分多出了0000，而9529依然被擋住。
如果將.red跟.blue也加入positon:absolute;
同時將index.html內的9527改為99、9528改為999、9529改為9999，
則會發現，藍色壓著綠色壓著紅色。
這是因為寫在越後面的element會排列在越上面的緣故。
fixed跟absolute擁有一樣的特性，但是他是以瀏覽器介面來定位。
也就是說被fixed的元素不會因為網頁的捲動而改變位置。
首先在index.html，我們將剛剛的.red、.green和.blue刪掉，並將9527給放出來。（取消註解）
接著在style.css中把.red、.green和.blue刪掉。
並改成position:fixed;
同時修改index.html如下。
index.html
<body>
<div class="site-header">9527</div>
<div class="container">123</div>
</body>
style.css
.site-header{
background-color:#5f5f5f;
position: fixed;
}
.container{
background-color: blue;
height:3000px;
}
這時會發現，無論怎麼捲動，
9527永遠存在左上角，這就是fixed的功用了。
抱歉圖傳的有點小，
因為之前傳整張的，只能傳一張，之後就會卡住了。
傳小一點可以傳很多張
iThome鐵人賽
看影片追技術