【前端】CSS : position

介紹

屬性指定了元素的定位類型

基本屬性

• static ： 默認值。沒有定位，元素出如今正常的流中
• relative ： 相對定位
• fixed ： 固定定位
• absolute ： 絕對定位
• sticky ： 粘性定位

用法

static

正常的佈局行爲，即元素在文檔常規流中當前的佈局位置。此時top, right, bottom, left和 z-index 屬性無效。

例：

.box {
    display: inline-block;
    height: 100px;
    width: 100px;
    line-height: 100px;
    text-align: center;
    background-color: #F19EC4;
    border-radius: 8px;
    color: #FFFFFF;
}
.position-static {
    position: static;
    background-color: #7FD0F3;
}
複製代碼

<div class="box">1</div>
<div class="box position-static">2</div>
<div class="box">3</div>
複製代碼

效果：

relative

相對定位 元素先放置在未添加定位時的位置，再在不改變頁面佈局的前提下調整元素位置。 position:relative對 table-*-group, table-row, table-column, table-cell, table-caption 元素無效

例：

.position-relative {
    position: relative;
    background-color: #7FD0F3;
    top: 20px;
    left: 20px;
}
複製代碼

<div class="box">1</div>
<div class="box position-relative">2</div>
<div class="box">3</div>
複製代碼

效果：box2在原來的位置上發生了偏移

fixed

固定定位 不爲元素預留空間，而是經過指定元素相對於屏幕視口（viewport）的位置來指定元素位置。元素的位置在屏幕滾動時不會改變。

例：

.position-fixed {
    position: fixed;
    background-color: #7FD0F3;
    bottom: 10px;
    left: 10px;
}
複製代碼

<div class="box">1</div>
<div class="box position-fixed">2</div>
<div class="box">3</div>
複製代碼

效果：圖中box2被定位在底部靠左的位置

absolute

絕對定位 不爲元素預留空間，經過指定元素相對於最近的非 static 定位祖先元素的偏移，來肯定元素位置。絕對定位的元素能夠設置外邊距（margins），且不會與其餘邊距合併。

例：

.position-absolute {
    position: absolute;
    background-color: #7FD0F3;
    bottom: 10px;
    left: 10px;
}
複製代碼

<div class="box">1</div>
<div class="box position-absolute">2</div>
<div class="box">3</div>
複製代碼

效果：與fixed類似，但會隨着屏幕滾動

sticky

粘性定位 元素先按照普通文檔流定位，而後相對於該元素在流中的 flow root（BFC）和 containing block（最近的塊級祖先元素）定位。光描述可能會一臉懵逼，看效果好了 須指定 top, right, bottom 或 left 四個閾值其中之一，纔可以使粘性定位生效。不然其行爲與相對定位相同。 （兼容性不大好）

例：多個元素使用sticky

.position-sticky {
    position: sticky;
    position: -webkit-sticky;
    background-color: #7FD0F3;
    top: 10px;
}
複製代碼

<div class="box">1</div>
<div class="box position-sticky">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box position-sticky">5</div>
<div class="box">6</div>
<div class="box">7</div>
<div class="box position-sticky">8</div>
<div class="box">9</div>
<div class="box">9</div>
複製代碼

效果：

but！在caniuse上查了下，兼容性兼容確實很差，就當學習了吧

圖片來自： caniuse.com/#tables

參考

developer.mozilla.org/zh-CN/docs/… zh.learnlayout.com/position.ht…

相關閱讀

CSS : 入門

CSS : display

CSS : float

CSS : 對齊、居中

有錯誤之處，感謝指出，接收批評