粘性布局: 結(jié)合了 position:relative 和 position:fixed 兩種定位于一體的特殊定位，適用于一些特殊場(chǎng)景。具體說明可查看 MDN-position
如下圖：
要求滑動(dòng)時(shí)固定第一行 ，第一列
樣例.png
滑動(dòng)后.png
position: sticky; /* 實(shí)現(xiàn)粘性布局 */
top: 100px; /* 固定的位置為距離頂部100px的位置，當(dāng)設(shè)置區(qū)域滑動(dòng)到距離父窗口頂部100px的位置固定 */
left: 100px; /* 固定的位置為距離左側(cè)100px的位置，當(dāng)設(shè)置區(qū)域向左滑動(dòng)到距離父窗口左側(cè)100px的位置固定 */
z-index: 1; /* 顯示層級(jí) */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>position: sticky; 粘性布局</title>
<style>
*{
margin: 0;
padding: 0;
}
.wrap{
width: 100%;
height: 100%;
}
/* 滾動(dòng)的盒子區(qū)域 */
.box{
width: 800px;
height: 500px;
margin: 10px auto;
overflow: auto; /* 注意點(diǎn)1: 父窗口可設(shè)置滑動(dòng)區(qū)域，如果沒有這個(gè)，默認(rèn)是body區(qū)域 */
}
.list{
margin: 0;
padding: 0;
list-style: none;
width: max-content; /* 注意點(diǎn)2: 可滑動(dòng)區(qū)域一定要是超出盒子高寬的，這里直接取最大值，不設(shè)置可能會(huì)出現(xiàn)滾出一個(gè)屏幕，固定塊消失 */
}
.list li span{
display: inline-flex;
justify-content: center;
align-items: center;
margin: 5px;
width: 100px;
height: 100px;
font-size: 24px;
color: #fff;
background-color: yellowgreen;
border: 1px solid #5e860c;
}
/* 設(shè)置第一行 固定在頂部 */
.list li:first-child{
position: sticky; /* 關(guān)鍵設(shè)置 position: sticky; */
top: 0; /* 固定的位置為頂部 */
z-index: 1; /* 顯示層級(jí) */
}
/* 設(shè)置第一列 固定在最左側(cè)*/
.list li span:first-child{
position: sticky;
left: 0; /* 定位left為0 */
background-color: red;
}
.list li:first-child span{
/* position: sticky;
left: 0; // 加上這個(gè)會(huì)有另一種效果，像左滑動(dòng)的時(shí)候，第一塊總是被新來的替換
top: 0; */
background-color: #f7d014;
}
</style>
</head>
<body>
<div class="wrap">
<div class="box">
<ul class="list">
<li>
<!-- span*100 -->
</li>
<!-- ... -->
</ul>
</div>
</div>
</body>
</html>
3
