iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 20
1
Modern Web

HTML 與 CSS 學習筆記系列 第 20

Day20 - Position (2) - 固定定位

固定定位

  • 不隨網頁滑動(滾動)而改變位置,例如購物車按鈕、置頂按鈕、聊天服務等固定區域的
  • 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>

參考資料

次回

來說明 HTML 的表格


上一篇
Day19 - Position (1) - 相對定位、絕對定位
下一篇
Day21 - HTML 與 CSS (5) - Table 表格
系列文
HTML 與 CSS 學習筆記31

尚未有邦友留言

立即登入留言