文章目錄

一、什麼是position?
二、static 靜态定位(預設)
三、absolute 絕對定位
- 3.1 absulote 嵌套用法同一個父元素
- 3.2 absulote 嵌套用法
四、relative 相對定位
- 4.1 relative裡邊的absolute
五、fixed 固定定位
- 5.1 會固定到熒幕中的固定位置，即使滾動頁面，也不會發生變化
- 5.2 fixed與其他定位的嵌套使用
六、sticky 粘性定位

一、什麼是position?

position屬性指定一個元素（靜态的，相對的，絕對或固定）的定位方法的類型。
他有以下5個屬性值分别是:
static靜态定位
absulote絕對定位
relative相對定位
fixed固定定位
sticky粘性定位

在開始講解之前我們先引入一個css檔案，它是預先編譯好的css樣式，作用是起到一些提示效果。

在head标簽加入:

<link rel="stylesheet" href="https://codingstartup.com/assets/css-position/hint.css">

二、static 靜态定位(預設)

HTMl裡邊所有元素的的position預設值都是static
忽略 top, bottom, left, right 或者 z-index 聲明，即不支援屬性

注意: static會跟随HTML的排版(flow移動）

詳解CSS position 屬性一、什麼是position?二、static 靜态定位(預設)三、absolute 絕對定位四、relative 相對定位五、fixed 固定定位六、sticky 粘性定位

三、absolute 絕對定位

absolute會固定在所設定的位置，不跟随排版移動

absolute如果在子級，那麼它會根據父級的absolute和relative定位，但不會根據父級的static來定位

HTMl+CSS

<style>
    .height{
        width: 750px;
        height: 120px;
    }
    /* 絕對定位 */
    .absolute{
        position: absolute;
        width: 240px;
        height: 240px;
        right: 80px;
        bottom: 60px;
    }
</style>

<body>
    <div class="height"></div>
    <div class="absolute"></div>
</body>

效果:

詳解CSS position 屬性一、什麼是position?二、static 靜态定位(預設)三、absolute 絕對定位四、relative 相對定位五、fixed 固定定位六、sticky 粘性定位

我們多加幾個藍色的div來看看absolute的位置會不會改變

<body>
    <div class="height"></div>
    <div class="height"></div>
    <div class="height"></div>
    <div class="height"></div>
    <div class="height"></div>
    <div class="height"></div>
    <!-- <div class="static"></div> -->
    <div class="absolute"></div>
</body>

效果：

詳解CSS position 屬性一、什麼是position?二、static 靜态定位(預設)三、absolute 絕對定位四、relative 相對定位五、fixed 固定定位六、sticky 粘性定位

可以看到absulote的位置并沒有發生改變
但是當頁面出現滾動條的時候，它會随着滾動條移動

詳解CSS position 屬性一、什麼是position?二、static 靜态定位(預設)三、absolute 絕對定位四、relative 相對定位五、fixed 固定定位六、sticky 粘性定位

3.1 absulote 嵌套用法同一個父元素

如果同一個父元素有相同的absulote的話，他們就會重疊
這裡為了區分是否重疊，我們把第二個div的right增加l為100

<body>
    <div class="height"></div>
    <div class="absolute"></div>
    <div class="absolute" style="right: 100px;"></div>
</body>

詳解CSS position 屬性一、什麼是position?二、static 靜态定位(預設)三、absolute 絕對定位四、relative 相對定位五、fixed 固定定位六、sticky 粘性定位

3.2 absulote 嵌套用法

如果在absulote的裡邊寫一個absolute，那麼裡邊的absolute則會依據父元素的absolute來定位。如果父元素沒有absolute,那麼它會一直找上去，直到找到body
是以裡邊的div會再向左偏移80px和向上偏移60px，

<body>
    <div class="height"></div>
    <div class="absolute">
        <div class="absolute"></div>
    </div>
</body>

詳解CSS position 屬性一、什麼是position?二、static 靜态定位(預設)三、absolute 絕對定位四、relative 相對定位五、fixed 固定定位六、sticky 粘性定位

四、relative 相對定位

重點：在它裡邊的absolute元素會根據relative的位置去定位

relative與satic很相似，都會跟随HTML的排版(flow)移動，但是它relative相比static多了left、right、top、bottom,
雖然relative會跟随HTML的排版移動，但是可以通過這四個值來調整位置

HTML+CSS
```
.relative{
        position: relative;
        width: 360px;
        height: 360px;
        top: 60px;
        left: 150px;
}

<body>
    <div class="height"></div>
    <div class="relative"></div>
</body>
           
```
效果:

詳解CSS position 屬性一、什麼是position?二、static 靜态定位(預設)三、absolute 絕對定位四、relative 相對定位五、fixed 固定定位六、sticky 粘性定位

4.1 relative裡邊的absolute

relative裡邊的absolute會根據relative來定位

HTML+CSS

/* 絕對定位 */
<style>
	.absolute{
	    position: absolute;
	    width: 240px;
	    height: 240px;
	    right: 80px;
	    bottom: 60px;
	}
	
	/* 相對定位 */
	.relative{
	    position: relative;
	    width: 360px;
	    height: 360px;
	    top: 60px;
	    left: 150px;
	}
</style>

<body>
    <div class="height"></div>
    <div class="height"></div>
    <div class="relative">
        <div class="absolute"></div>
    </div>
</body>

效果：

詳解CSS position 屬性一、什麼是position?二、static 靜态定位(預設)三、absolute 絕對定位四、relative 相對定位五、fixed 固定定位六、sticky 粘性定位

五、fixed 固定定位

5.1 會固定到熒幕中的固定位置，即使滾動頁面，也不會發生變化

<style>
	.fixed{
	    position: fixed;
	    width: 240px;
	    height: 240px;
	    left: 80px;
	    bottom: 60px;
	}
</style>

<body>
    <div class="height"></div>
    <div class="height"></div>
    <div class="height"></div>
    <div class="height"></div>
    <div class="height"></div>
    <div class="height"></div>
    <div class="height"></div>
    <div class="height"></div>
    <div class="height"></div>
    
    <div class="fixed"></div>
</body>

詳解CSS position 屬性一、什麼是position?二、static 靜态定位(預設)三、absolute 絕對定位四、relative 相對定位五、fixed 固定定位六、sticky 粘性定位

5.2 fixed與其他定位的嵌套使用

如果fixed 設定有 left、right、top、bottom屬性，即使放在relative與absolute裡邊，fixed也會根據頁面(body)去定位。

如果沒有設定它則以文檔流方式存在。

沒有設定left、right、top、bottom屬性

HTML+CSS

<style>
	.relative{
	    position: relative;
	    width: 360px;
	    height: 360px;
	    top: 60px;
	    left: 150px;
	}
	.fixed{
	    position: fixed;
	    width: 240px;
	    height: 240px;
	    left: 80px;
	    bottom: 60px;
	}
</style>

<body>
    <div class="height"></div>
    <div class="absolute ">
        <div style="position: fixed;width: 50px;height: 50px;background-color: #000000;"></div>
    </div>
</body>

效果:

詳解CSS position 屬性一、什麼是position?二、static 靜态定位(預設)三、absolute 絕對定位四、relative 相對定位五、fixed 固定定位六、sticky 粘性定位

設定left、right、top、bottom屬性
```
<body>
    <div class="height"></div>
    <div class="relative ">
        <div style="position: fixed;width: 50px;height: 50px;background-color: #000000;bottom:100px"></div>
    </div>
</body>
           
```
效果:

詳解CSS position 屬性一、什麼是position?二、static 靜态定位(預設)三、absolute 絕對定位四、relative 相對定位五、fixed 固定定位六、sticky 粘性定位

六、sticky 粘性定位

它的行為就像 position:relative; 而當頁面滾動超出目标區域時，它的表現就像 position:fixed;，它會固定在目标位置。
sticky會在滾動的過程當中貼到頂部，原因是我們将它的top設定為0

詳解CSS position 屬性一、什麼是position?二、static 靜态定位(預設)三、absolute 絕對定位四、relative 相對定位五、fixed 固定定位六、sticky 粘性定位

詳解CSS position 屬性一、什麼是position?二、static 靜态定位(預設)三、absolute 絕對定位四、relative 相對定位五、fixed 固定定位六、sticky 粘性定位

文章目錄

一、什麼是position?

二、static 靜态定位(預設)

三、absolute 絕對定位

3.1 absulote 嵌套用法同一個父元素

3.2 absulote 嵌套用法

四、relative 相對定位

4.1 relative裡邊的absolute

五、fixed 固定定位

5.1 會固定到熒幕中的固定位置，即使滾動頁面，也不會發生變化

5.2 fixed與其他定位的嵌套使用

六、sticky 粘性定位

繼續閱讀

CSS中僞類和僞元素的差別

CSS的僞類與僞元素的差別

css中僞類與僞元素的差別

談談css的僞類和僞元素

僞類與僞元素的差別僞類與僞元素的差別

web前端布局練手項目

CSS----對字号的控制:Points, ems, pixels, 及其它機關,關鍵字,比例參數

趕工心得（一）

陪學讀書會——《定位》第七章：跟随者的定位

陪學讀書會——《定位》第九章：名字的威力（上）

兩種清除浮動的方法

如何成為一名.net 工程師?

tabpanel 使用問題

CSS之折疊菜單

DOM下元素 offset client scroll 相關屬性簡介

IE8 CSS設定DIV居中，添加“margin:0 auto”

詳解CSS position 屬性一、什麼是position?二、static 靜态定位(預設)三、absolute 絕對定位四、relative 相對定位五、fixed 固定定位六、sticky 粘性定位

文章目錄

一、什麼是position?

二、static 靜态定位(預設)

三、absolute 絕對定位

3.1 absulote 嵌套用法 同一個父元素

3.2 absulote 嵌套用法

四、relative 相對定位

4.1 relative裡邊的absolute

五、fixed 固定定位

5.1 會固定到熒幕中的固定位置，即使滾動頁面，也不會發生變化

5.2 fixed與其他定位的嵌套使用

六、sticky 粘性定位

繼續閱讀

3.1 absulote 嵌套用法同一個父元素