# CSS Layout - display、position
###### tags: `CSS`
教學資源：
[position|MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/position)

## :pushpin:dispaly顯示屬性
利用這些顯示的屬性可以覆蓋預設值進行排版，自由的設定元素顯示的類型，ex:縮放頁面時nav的display方式

>常見區塊元素標籤：div、ul li、p、h1
常見行內元素標籤：span、a、input、img

display: none;
display: block;
display: inline;
display: inline-block;

1. none
* 在瀏覽頁面時無法看到這個區塊
3. block
* 每個block元素皆會佔據一行，並占據整個父元素的寬度 ex:`<h1> <p> <ul>`
* 下一個元素另起一行，由上到下
4. inline
* 在行內的元素，僅占用所需的寬，可以透過line-height、padding、margin讓內容撐開寬高 ex:`a`、`span`
* 常用在段落中
5. inline-block
* 讓block像inline在行內並排

## :pushpin:position定位
設置元素在文件中的位置

### static

position:static;

根據文檔的順序排列，為預設樣式
### relative & absolute

position: relative;
top: 40px; left: 40px;

position: absolute;
top: 40px; left: 40px

* relative 相對定位，元素根據文檔的正常流進行定位，若設定數值時將會以自身的位置偏移

* absolute 絕對定位，以父元素為標準尋找定位，父層為relative時則會以其為基準在方框內定位

### fixed & sticky

position: fixed;
top: 80px;
left: 10px;

position: sticky;
top: 20px;

* fixed 不在文檔流中排列，固定於頁面上，滾動時也不改變位置
* sticky 不會脫離原本的排版流，在還沒有滾動到時就像是relative，須設定數值，滾動到後像 absolute 一樣，位置會固定在相對於參考點的絕對位置上
* z-index 兩者皆可使用z-index改變對疊的順序，0為基準，-1會下層，1為上層

## :pushpin:float
可製造文繞圖效果

img{
  float:left
}
.clear{
  clear:both
}