css position 屬性

首先準備一下測試的html代碼：

<div class="one"></div><div class="two"></div><div class="three"></div><div class="four"></div><div class="five"></div><div class="six"></div><div class="seven"></div>

1,absolute:中文意思為絕對的，生成絕對定位的元素，元素的位置通過(guò) "left", "top", "right" 以及 "bottom" 屬性進(jìn)行規定。

?

 1         .one{ 2             position: absolute; 3             width: 500px; 4             height: 500px; 5             border: 1px solid #000; 6             top: 100px; 7             left: 100px; 8         } 9         .two{10             position: absolute;11             width: 500px;12             height: 500px;13             border: 1px solid #000;14             top: 700px;15             left: 100px;16         }

在這里我們就將class為one和two的兩個(gè)元素的position設置為absolute，這兩個(gè)元素就被固定在了網(wǎng)頁(yè)的某個(gè)位置，不會(huì )因為其他的一些因素而改變。當鼠標向下滾動(dòng)時(shí)，沒(méi)有變化。效果圖：

2，fixed：生成固定定位的元素，相對于瀏覽器窗口進(jìn)行定位。元素的位置通過(guò) "left", "top", "right" 以及 "bottom" 屬性進(jìn)行規定。

添加代碼：

        .three{            position: fixed;            width: 500px;            height: 500px;            border: 1px solid #000;            top: 300px;            left: 700px;        }

當我們鼠標向下滾動(dòng)時(shí)，class為three這個(gè)元素相當于固定在窗口的某個(gè)位置?？勺孕袦y試效果。圖片不好展示效果。

右邊的滾動(dòng)條我向下拉動(dòng)了一點(diǎn)，但是class為three這個(gè)元素在窗口中的位置還是沒(méi)變，而另外兩個(gè)變了。

3，relative：生成相對定位的元素，相對于其正常位置進(jìn)行定位。因此，"left:20" 會(huì )向元素的 LEFT 位置添加 20 像素。相對定位會(huì )按照元素的原始位置對該元素進(jìn)行移動(dòng)。

代碼為：

1 <h2>這是標題正常位置</h2>2 <h2 class="left">這是標題向左移動(dòng)位置</h2>3 <h2 class="right">這是標題向右移動(dòng)位置</h2>

1         h2.left{2             position: relative;3             left: -30px;4         }5         h2.right{6             position: relative;7             left: 30px;8 9         }

樣式 "left:-20px" 從元素的原始左側位置減去 20 像素。

樣式 "left:20px" 向元素的原始左側位置增加 20 像素。

4,static：默認值。沒(méi)有定位，元素出現在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）。

5,sticky：基于用戶(hù)的滾動(dòng)位置來(lái)定位。

　　粘性定位的元素是依賴(lài)于用戶(hù)的滾動(dòng)，在?position:relative?與?position:fixed?定位之間切換。

　　它的行為就像?position:relative;?而當頁(yè)面滾動(dòng)超出目標區域時(shí)，它的表現就像?position:fixed;，它會(huì )固定在目標位置。

　　元素定位表現為在跨越特定閾值前為相對定位，之后為固定定位。

　　這個(gè)特定閾值指的是 top, right, bottom 或 left 之一，換言之，指定 top, right, bottom 或 left 四個(gè)閾值其中之一，才可使粘性定位生效。否則其行為與相對定位相同。

?