css position屬性學習

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:中文意思爲絕對的，生成絕對定位的元素，元素的位置經過 "left", "top", "right" 以及 "bottom" 屬性進行規定。

 

 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的兩個元素的position設置爲absolute，這兩個元素就被固定在了網頁的某個位置，不會由於其餘的一些因素而改變。當鼠標向下滾動時，沒有變化。效果圖：

 

 

2，fixed：生成固定定位的元素，相對於瀏覽器窗口進行定位。元素的位置經過 "left", "top", "right" 以及 "bottom" 屬性進行規定。

添加代碼：

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

當咱們鼠標向下滾動時，class爲three這個元素至關於固定在窗口的某個位置。可自行測試效果。圖片很差展現效果。

 

右邊的滾動條我向下拉動了一點，可是class爲three這個元素在窗口中的位置仍是沒變，而另外兩個變了。

3，relative：生成相對定位的元素，相對於其正常位置進行定位。所以，"left:20" 會向元素的 LEFT 位置添加 20 像素。相對定位會按照元素的原始位置對該元素進行移動。

代碼爲：

1 <h2>這是標題正常位置</h2>
2 <h2 class="left">這是標題向左移動位置</h2>
3 <h2 class="right">這是標題向右移動位置</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：默認值。沒有定位，元素出如今正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）。

5,sticky：基於用戶的滾動位置來定位。

　　粘性定位的元素是依賴於用戶的滾動，在 position:relative 與 position:fixed 定位之間切換。

　　它的行爲就像 position:relative; 而當頁面滾動超出目標區域時，它的表現就像 position:fixed;，它會固定在目標位置。

　　元素定位表現爲在跨越特定閾值前爲相對定位，以後爲固定定位。

　　這個特定閾值指的是 top, right, bottom 或 left 之一，換言之，指定 top, right, bottom 或 left 四個閾值其中之一，纔可以使粘性定位生效。不然其行爲與相對定位相同。