固定定位

• 不隨網頁滑動(滾動)而改變位置，例如購物車按鈕、置頂按鈕、聊天服務等固定區域的
• fixed：類似絕對座標固定位置，但參考的是瀏覽器視窗，也就是我們看得到的視窗範圍來進行

以下例來說，可以在右下角看到一個藍色區塊不隨著畫面滾動而改變位置
(可利用快速輸入設定一個超過 1 頁長度的資料，來驗證滾動卻固定不移動的功能)

<div class="box_fixed"></div>

.box_fixed {
    width: 100px;
    height: 100px;
    background: blue;
    position: fixed;
    left: 0;
    bottom: 0;
}

• 利用 absolute 的特性，可以在需求的區塊內，固定在一個顯眼的地方(如購物網站上面的特價標籤)
• 利用 fixed 的特性，可以固定視窗在一個固定的地方(如購物網站上面的結帳按鈕)

快速輸入

• ul>li{$}*10

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
</ul>

參考資料

• 關於 position 屬性
• CSS relative? absolute? 傻傻分不清楚
• 10步掌握CSS定位: position static relative absolute float
• 前端新手村 Position 定位

次回

來說明 HTML 的表格