css的定位是用來解決文章的疊加排列的，例如視訊網站中電視劇封面圖檔的獨播、集數等，都是使用定位的方式進行排版。如下圖
css的定位方式分為static、relative、absolute、fixed、sticky。
1.static（預設值）：沒有定位。
2.relative（相對定位）
特點 ：
（1）如果沒有定位偏移量，對元素本身并沒有任何影響。
（2） 不使元素脫離文檔流，其空間會被保留。
（3） 不影響其他元素的布局。
（4） 定位其偏移量（left，top，right，bottom）是相對于元素本身進行偏移的。
例： 當給目前元素設定position：relative ；left:20px時，其位置會相對于目前元素的位置向左偏移20px。
3.absolute（絕對定位）
特點：
（1）會使元素完全脫離文檔流。
（2）是内聯元素支援寬高；使塊元素預設寬根據内容決定。
（3）生成絕對定位的元素，相對于定位（除了static的其他定位）的祖先元素進行偏移，若沒有定位祖先元素，則相對于整個頁面進行偏移。如果定義了多個祖先元素，生成絕對定位的元素相對于離其最近的祖先元素（父元素）進行偏移。
例：
html代碼：
<div id="box">
<div class="box1"></div>
</div>
css代碼：
<style>
#box{background: red;border: 1px solid black;width: 200px;height: 200px;; }
#box .box1{width: 100px;height: 100px;background: yellow；}
</style>
運作出來的結果如下圖
當給#box和.box1分别添加相對定位和絕對定位後：
<style>
#box{background: red;border: 1px solid black;width: 200px;height: 200px;; position: relative;}
#box .box1{width: 100px;height: 100px;background: yellow;position: absolute;top: 100px;left: 100px;}
</style>
運作結果如下：
可以看到box1相對于其父元素進行了偏移。
4. fixed（固定定位）：
特點：
（1）使元素完全脫離文檔裡。
（2）使内聯元素支援寬高；使塊元素預設寬根據内容決定。
（3）相對于整個浏覽器視窗進行偏移，不受浏覽器滾動條的影響。
（4）不會受其祖先元素的影響。
例：
html代碼
<body>
<div id="box">
<div class="box1"></div>
</div>
</body>
css代碼
body{height: 3000px;}
#box{border: 1px solid black;width: 200px;height: 200px; }
#box .box1{width: 100px;height: 100px;background: yellow;}
運作結果如下：
此時滑動滾動條時，整個box會跟随滾動條的滑動進行移動：
當給box1加個固定定位之後：
css代碼如下：
body{height: 3000px;}
#box{border: 1px solid black;width: 200px;height: 200px; }
#box .box1{width: 100px;height: 100px;background: yellow;position: fixed;}
運作結果：
可以看到，在給box1加了固定定位之後，box會随着滾動條的滑動而移動，box1卻不會，會一直固定不動。
5. sticky（黏性定位）
特點：sticky相當于是static和fixed的結合體。給position：sticky；定義一個位置，在沒滑到那個位置之前，和沒有定位沒有差別，但是當滑動到定義的位置之後，就産生了固定定位的特性。
例：
HTML代碼：
<body>
<div id="box">
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p class="show">hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
</div>
</body>
css代碼：
body{height: 3000px;}
#box p{margin-bottom: 100px;}
#box p.show{position: sticky;top: 100px;background: red;}
運作結果：
沒有滑動到.show距離top100px的時候，跟沒有設定定位沒差別，都随着滾動條的滑動而移動。
當.show到達距離top100px的位置時：
《逆戰班》