CSS中position的屬性用法,靈活移動你的元素

我是fixed

position的介紹

position在CSS編排是非常重要的語法之一,可以設計出更複雜的版面配置,好好掌握在排版上就能有更高的自由度,其中特別重要的四個值分別為static(預設值)、relative (相對定位)、fixed(固定定位)、absolute (絕對定位)

static(預設值)

Static是position的預設值,他不會被定位,只會跟著瀏覽器往上自動排版,此時 top,  right,  bottom, left 和 z-index 屬性無效

呈現方式

  • 設置兩個box的position屬性都是static
  • 邊框1px紅色
  • 粉紅背景
  • 高跟寬100px
  • 並排對齊
  • 其中一個static的箱子加上top、 right…這些移動屬性,觀察是否真的有影響

※這裡用到CSS選擇器跟display屬性呈現,可以參考以下文章:

CSS中display的屬性差異

HTML

    <div class=”box-static”>我是static</div>

    <div class=”box-static2″>我加移動屬性</div>

CSS

<style>       

[class^=box] {

            border: 1px solid red;

            background: pink;

            width: 100px;

            height: 100px;

            display: inline-block;

        }

        .box-static {

            position: static;

        }

        .box-static2 {

            position: static;

            top: 50%;

            right: 50%;

        }

 </style>

程式執行結果

可以看到一樣的設置position:static,加了移動屬性的盒子也沒有移動

我是static
我加移動屬性

relative(相對定位)

position:relative在沒有設置任何移動屬性的情況下,則是跟static,會停留在瀏覽器給他編排的位置,但加入了移動元素,則是會依照「自己原本顯示的位置為基準位置」,且區塊原本的空間仍會保留不會消失

呈現方式

  • 設置三個box的position屬性分別為一個static,兩個relative
  • 邊框1px紅色
  • 粉紅背景
  • 高跟寬100px
  • 並排對齊
  • 使用一個static來做一個對照,另外設置一個完全沒有移動屬性,以及一個有移動屬性的relative做比較

※這裡用到CSS選擇器跟display屬性呈現,可以參考以下文章:

CSS中display的屬性差異

HTML

 <div class=”box-static”>我是static</div>

 <div class=”box-relative”>我是relative</div>

 <div class=”box-relative2″>我加移動屬性</div>

CSS

<style>

[class^=box] {

            border: 1px solid red;

            background: pink;

            width: 100px;

            height: 100px;

            display: inline-block;

        }

        .box-static {

            position: static;

        }

        .box-relative {

            position: relative;

        }

        .box-relative2 {

            position: relative;

            top: 50px;

            right: 50px;

        }

 </style>

程式執行結果

可以看到設置position:static跟沒有移動的position:relative都沒有移動,而加了移動屬性的relative移動了,且覆蓋在另一個盒子上

我是static
我是relative
我加移動屬性

fixed(固定定位)

position:fixed是會以整個視窗基準,來進行移動,但他特別在於,即便滑動卷軸,他還是會固定視窗的一個定點,常常被利用於拉回最上層,回首頁等按鈕

呈現方式

  • 設置一個box屬性為fixed,並直接加入移動屬性
  • 邊框1px綠色
  • 亮綠背景
  • 高跟寬100px
  • 設置right跟bottom都為0%,讓他可以維持在右下角

HTML

<div class=”green-fixed”>我是fixed</div>

CSS

<style>

.green-fixed {

            position: fixed;

            bottom: 0%;

            right: 0%;

            width: 100px;

            height: 100px;

            background: greenyellow;

            border: 1px solid green;

        }

    </style>

程式執行結果

相信一開始點進文章就有注意到,設置完fixed,就會一直維持在整個螢幕的固定位置,這次是設置在螢幕右下角

absolute (絕對定位)

absolute跟fixed有點像,他是跟著某一個基準移動,只是fixed是跟著整個螢幕,而absolute則是以自身階層開始往上算,跟著父層且非static的元素走,若沒有指定基準元素的話,預設是以 body 元素(整個視窗)為基準,是非常好利用在各種相對位置上

常常被使用搭配組合為relative跟absolute,這其中還有進階用法,由於absolute的基準點在盒子的左上角,可以加入transform: translate();來改變中心點,改成正中心為(-50%,-50%)

呈現方式

  • 設置兩個box的position屬性分別為一個relative跟一個absolute
  • relative邊框1px紅色,粉紅背景
  • relative高跟寬300px
  • absolute邊框1px藍色,淺藍背景
  • absolute高跟寬100px

HTML

  <div class=”box-relative”>我是relative

        <div class=”box-absolute”>我是absolute</div>

    </div>

CSS

<style>

.box-relative {

            border: 1px solid red;

            background: pink;

            width: 300px;

            height: 300px;

            position: relative;

        }

        .box-absolute {

            border: 1px solid blue;

            background: rgb(81, 165, 221);

            width: 100px;

            height: 100px;

            position: absolute;

            top: 10%;

            left: 10%;

        }

</style>

程式執行結果

可以看到absolute會依照父層relative的位置來去移動自身位置

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *