我不知道的CSS - position
熟悉我的小伙伴可能知道，我最近回長沙工作了，由于之前大部分時間在做工具，Node.js 的開發(fā)比較多。but，現(xiàn)在又重新開始寫了一些業(yè)務(wù)代碼，發(fā)現(xiàn) CSS 有很多博大精深的東西，所以，今天的文章復(fù)習(xí)一下 CSS 定位相關(guān)的東西。
定位的類型
在最新的 CSS 規(guī)范中，定位的元素一共分為四種類型：
relative：相對定位元素absolute：絕對定位元素fixed：固定定位元素sticky：粘性定位元素
如果元素沒有設(shè)置 position 屬性，默認(rèn)為 static ，其所有定位相關(guān)的屬性（top/bottom/left/right/z-index）就會失效。
在不修改 position 屬性的情況下，冒然給它設(shè)置 top、left等屬性，會發(fā)現(xiàn)它巋然不動。
相對定位
相對定位是指元素在原來的位置上，進(jìn)行一定的偏移，具體偏移到哪里，還是得看 top/bottom/left/right 這四個屬性的值。
下面給一個元素設(shè)置為相對定位（position: relative;），然后讓元素距離頂部和左邊都為 30px。
<style>
??div?{
????width:?200px;
????height:?200px;
????background:?steelblue;
??}
??.relative?{
????position:?relative;
????top:?30px;
????left:?30px;
??}
</style>
<body>
??<div?class="relative"></div>
<body/>
下面的圖片就是元素沒有加上 .releativ和加上 .releative 的區(qū)別。
元素在絕對定位的時候，其初始位置會被保留下來，也就是原來的位置上會留白。
div?{
??display:?inline-block;
??width:?200px;
??height:?200px;
}
.box1?{
??background:?red;
}
.box2?{
??background:?yellow;
}
.box3?{
??background:?blue;
}
.relative?{
??position:?relative;
??top:?30px;
??left:?30px;
}
先為元素定義好樣式，在三個元素都沒有進(jìn)行偏移時，如下所示：
<body>
??<div?class="box1"></div>
??<div?class="box2"></div>
??<div?class="box3"></div>
<body/>
如果給第二個元素加上相對定位，第二個元素就會向右邊和下邊進(jìn)行偏移，同時在原始的位置會空出來一塊。
<body>
??<div?class="box1"></div>
??<div?class="box2?relative"></div>
??<div?class="box3"></div>
<body/>
絕對定位
絕對定位不會相對于原來的位置定位，而是會向上查找，找到一個非 static 的祖先元素進(jìn)行定位，如果一直到 body 都沒有非 static 的元素，則會相對于 body 來進(jìn)行定位。
<style>
??body?{?/*?清理body默認(rèn)樣式?*/
????margin:?0;
????padding:?0;
??}
??.box?{
????margin:?30px;
????display:?inline-block;
????width:?300px;
????height:?300px;
??}
??.box1?{
????position:?relative;
????border:?3px?solid?red;
??}
??.box2?{
????border:?3px?solid?yellow;
??}
??.box3?{
????border:?3px?solid?blue;
??}
??.absolute?{
????/*
????position:?absolute;
????top:?30px;
????left:?30px;
????*/
????width:?100px;
????height:?100px;
????background-color:?aquamarine;
??}
</style>
<body>
??<div?class="box?box1">
????<div?class="box?box2">
??????<div?class="box?box3">
????????<div?class="absolute"></div>
??????</div>
????</div>
??</div>
</body>
在未給最內(nèi)部的 div 設(shè)置 position 屬性時，它是緊挨著 div.box3 的邊框的。下面我們給內(nèi)部的 div 加上 position: absolute; ，讓其進(jìn)行絕對定位。
.absolute?{
??position:?absolute;
??top:?30px;
??left:?30px;
??width:?100px;
??height:?100px;
??background-color:?aquamarine;
}
由于外面三層的 div.box 都是默認(rèn)的 static 狀態(tài)，所以絕對定位的元素會相對于 body 進(jìn)行定位，距離 body 的頂部和左邊 30px。
現(xiàn)在，給 div.box2 加上一個相對定位，此時的絕對定位元素就會相對于 div.box2 來進(jìn)行定位。
.box2?{
??position:?relative;
??border:?3px?solid?yellow;
}
絕對定位除了定位的元素不同，它的初始位置也不會被保留，相當(dāng)于脫離了文檔流。這里我們可以用之前相對定位的案例，布局三個 div，讓中間的 div 進(jìn)行絕對定位。
<style>
??div?{
????display:?inline-block;
????width:?200px;
????height:?200px;
??}
??.box1?{
????background:?red;
??}
??.box2?{
????background:?yellow;
??}
??.box3?{
????background:?blue;
??}
??.absolute?{
????position:?absolute;
????top:?30px;
????left:?30px;
??}
</style>
<body>
??<div?class="box1"></div>
??<div?class="box2?absolute"></div>
??<div?class="box3"></div>
</body>
可以看到，中間的 div 會相對于 body 進(jìn)行定位，同時，它原來的位置也不會被保留。
固定定位
理解了相對定位和絕對定位，固定定位就比較好理解了。固定定位會相對于視窗進(jìn)行定位，而且和絕對定位一樣也會脫離文檔流。這里寫一個簡單的例子：
<style>
??.box?{
????width:?200px;
????height:?200px;
????border:?1px?solid?red;
????margin:?100px;
??}
??.fixed?{
????position:?fixed;
????top:?30px;
????left:?30px;
????width:?100px;
????height:?100px;
????background-color:?cadetblue;
??}
</style>
<body>
??<div?class="box">
????<div?class="fixed"></div>
??</div>
</body>
粘性定位
前面的內(nèi)容都是復(fù)習(xí)，這個粘性定位確實是最近剛剛接觸的??，沒辦法 CSS 太菜了。
粘性定位可以理解為相對定位和固定定位的縫合，會出現(xiàn)這個屬性主要是現(xiàn)在很多 H5 頁面都會有這種在頂部固定的導(dǎo)航欄，看來 W3C 也是能看到我們普通開發(fā)者的需求的。
.sticky?{
??position:?sticky;
??top:?0;
??margin-top:?50px;
}
當(dāng)我們給一個元素設(shè)置為粘性定位時，如果設(shè)置了 top: 0;，粘性定位的元素在它距離視窗頂部大于 0 的時候，會按照默認(rèn)布局來，也就是和相對定位表現(xiàn)一致。一旦其距離頂部的距離等于 0，這元素會固定在窗口的這個地方，此時的表現(xiàn)和固定布局表現(xiàn)一致。
具體的效果如下：
有了這個屬性就可以少些很多 JavaScript 代碼了，通過幾行 CSS 就能實現(xiàn)一起需要引入一個插件才能實現(xiàn)的功能。原來現(xiàn)在的 CSS 已經(jīng)這么厲害了。
最近更新公眾號的頻率明顯下降，而且內(nèi)容也越來越水了，之前寫的 Go 筆記也沒什么深入的內(nèi)容。最近因為換城市、換工作，然后也一時不知道寫什么，導(dǎo)致質(zhì)量有明顯的下降，后面會慢慢恢復(fù)周更，然后會多寫一點前端框架和工程化方面的東西，共勉。
- END -