Position

Static

    • 預設
    • 無法改動上下左右位置
    • 也無法針對内部元素做定位(進階)
    • 會隨滾輪跑走
<div class="static">static</div>
div{
 border: solid 1px black;
 width: 300px;
 height: 100px;
}

.static{
 position: static;
 right: 10px;
}

Display

static

.

 

Relative

  • 相對於static偏移
  • 能夠改動上下左右位置,但是以static基準移動
  • 會隨滾輪跑走
<div class="relative">relative</div>
div{
 border: solid 1px black;
 width: 300px;
 height: 100px;
}

.relative{
 position: relative;
 left: 10px;
}

Display

relative

.

Absolute

  • 針對上層框架(通常是body)做定位
  • 可以移動上下左右位置
  • 會隨滾輪跑走
<div class="absolute">absolute</div>
div{
 border: solid 1px black;
 width: 300px;
 height: 100px;
}

.absolute{
 position: absolute;
 left: 10px;
}

Display

absolute

.

Fixed

  • 無法針對上層框架做定位,只能針對body定位
  • 可以移動上下左右位置
  • 不隨滾輪跑走
<div class="fixed">fixed</div>
div{
 border: solid 1px black;
 width: 300px;
 height: 100px;
}

.fixed{
 position: fixed;
 //fixed要記得設定left/top/right/bottom
 //否則會消失
 left: 10px;
}

Display
can’t be showed up

備註

當單元素position改變時,不影響其他元素定位。
若需要其他元素自動改變定位,則使用margin, padding為佳。

CodePen Example

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *