自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

我不知道的CSS - Position

作者：寫(xiě)文章的自然醒
開(kāi)發(fā) 前端
熟悉我的小伙伴可能知道，我最近回長(zhǎng)沙工作了，由于之前大部分時(shí)間在做工具，Node.js 的開(kāi)發(fā)比較多。but，現(xiàn)在又重新開(kāi)始寫(xiě)了一些業(yè)務(wù)代碼，發(fā)現(xiàn) CSS 有很多博大精深的東西，所以，今天的文章復(fù)習(xí)一下 CSS 定位相關(guān)的東西。

[[411102]]

本文轉(zhuǎn)載自微信公眾號(hào)「自然醒的筆記本」，作者寫(xiě)文章的自然醒 。轉(zhuǎn)載本文請(qǐng)聯(lián)系自然醒的筆記本公眾號(hào)。

熟悉我的小伙伴可能知道，我最近回長(zhǎng)沙工作了，由于之前大部分時(shí)間在做工具，Node.js 的開(kāi)發(fā)比較多。but，現(xiàn)在又重新開(kāi)始寫(xiě)了一些業(yè)務(wù)代碼，發(fā)現(xiàn) CSS 有很多博大精深的東西，所以，今天的文章復(fù)習(xí)一下 CSS 定位相關(guān)的東西。

定位的類型

在最新的 CSS 規(guī)范中，定位的元素一共分為四種類型：

  • relative：相對(duì)定位元素
  • absolute：絕對(duì)定位元素
  • fixed：固定定位元素
  • sticky：粘性定位元素

如果元素沒(méi)有設(shè)置 position 屬性，默認(rèn)為 static ，其所有定位相關(guān)的屬性(top/bottom/left/right/z-index)就會(huì)失效。

在不修改 position 屬性的情況下，冒然給它設(shè)置 top、left等屬性，會(huì)發(fā)現(xiàn)它巋然不動(dòng)。

相對(duì)定位

相對(duì)定位是指元素在原來(lái)的位置上，進(jìn)行一定的偏移，具體偏移到哪里，還是得看 top/bottom/left/right 這四個(gè)屬性的值。

下面給一個(gè)元素設(shè)置為相對(duì)定位(position: relative;)，然后讓元素距離頂部和左邊都為 30px。

  1. <style> 
  2.   div { 
  3.     width: 200px; 
  4.     height: 200px; 
  5.     background: steelblue; 
  6.   } 
  7.   .relative { 
  8.     position: relative; 
  9.     top: 30px; 
  10.     left: 30px; 
  11.   } 
  12. </style> 
  13. <body> 
  14.   <div class="relative"></div> 
  15. <body/> 

下面的圖片就是元素沒(méi)有加上 .releativ和加上 .releative 的區(qū)別。

元素在絕對(duì)定位的時(shí)候，其初始位置會(huì)被保留下來(lái)，也就是原來(lái)的位置上會(huì)留白。

  1. div { 
  2.   display: inline-block; 
  3.   width: 200px; 
  4.   height: 200px; 
  5. } 
  6. .box1 { 
  7.   background: red; 
  8. } 
  9. .box2 { 
  10.   background: yellow; 
  11. } 
  12. .box3 { 
  13.   background: blue; 
  14. } 
  15. .relative { 
  16.   position: relative; 
  17.   top: 30px; 
  18.   left: 30px; 
  19. } 

先為元素定義好樣式，在三個(gè)元素都沒(méi)有進(jìn)行偏移時(shí)，如下所示：

  1. <body> 
  2.   <div class="box1"></div> 
  3.   <div class="box2"></div> 
  4.   <div class="box3"></div> 
  5. <body/> 

如果給第二個(gè)元素加上相對(duì)定位，第二個(gè)元素就會(huì)向右邊和下邊進(jìn)行偏移，同時(shí)在原始的位置會(huì)空出來(lái)一塊。

  1. <body> 
  2.   <div class="box1"></div> 
  3.   <div class="box2 relative"></div> 
  4.   <div class="box3"></div> 
  5. <body/> 

絕對(duì)定位

絕對(duì)定位不會(huì)相對(duì)于原來(lái)的位置定位，而是會(huì)向上查找，找到一個(gè)非 static 的祖先元素進(jìn)行定位，如果一直到 body 都沒(méi)有非 static 的元素，則會(huì)相對(duì)于 body 來(lái)進(jìn)行定位。

  1. <style> 
  2.   body { /* 清理body默認(rèn)樣式 */ 
  3.     margin: 0; 
  4.     padding: 0; 
  5.   } 
  6.   .box { 
  7.     margin: 30px; 
  8.     display: inline-block; 
  9.     width: 300px; 
  10.     height: 300px; 
  11.   } 
  12.   .box1 { 
  13.     position: relative; 
  14.     border: 3px solid red; 
  15.   } 
  16.   .box2 { 
  17.     border: 3px solid yellow; 
  18.   } 
  19.   .box3 { 
  20.     border: 3px solid blue; 
  21.   } 
  22.  
  23.   .absolute { 
  24.     /* 
  25.     position: absolute; 
  26.     top: 30px; 
  27.     left: 30px; 
  28.     */ 
  29.     width: 100px; 
  30.     height: 100px; 
  31.     background-color: aquamarine; 
  32.   } 
  33. </style> 
  34. <body> 
  35.   <div class="box box1"> 
  36.     <div class="box box2"> 
  37.       <div class="box box3"> 
  38.         <div class="absolute"></div> 
  39.       </div> 
  40.     </div> 
  41.   </div> 
  42. </body> 

在未給最內(nèi)部的 div 設(shè)置 position 屬性時(shí)，它是緊挨著 div.box3 的邊框的。下面我們給內(nèi)部的 div 加上 position: absolute; ，讓其進(jìn)行絕對(duì)定位。

  1. .absolute { 
  2.   position: absolute; 
  3.   top: 30px; 
  4.   left: 30px; 
  5.   width: 100px; 
  6.   height: 100px; 
  7.   background-color: aquamarine; 
  8. } 

由于外面三層的 div.box 都是默認(rèn)的 static 狀態(tài)，所以絕對(duì)定位的元素會(huì)相對(duì)于 body 進(jìn)行定位，距離 body 的頂部和左邊 30px。

現(xiàn)在，給 div.box2 加上一個(gè)相對(duì)定位，此時(shí)的絕對(duì)定位元素就會(huì)相對(duì)于 div.box2 來(lái)進(jìn)行定位。

  1. .box2 { 
  2.   position: relative; 
  3.   border: 3px solid yellow; 
  4. } 

絕對(duì)定位除了定位的元素不同，它的初始位置也不會(huì)被保留，相當(dāng)于脫離了文檔流。這里我們可以用之前相對(duì)定位的案例，布局三個(gè) div，讓中間的 div 進(jìn)行絕對(duì)定位。

  1. <style> 
  2.   div { 
  3.     display: inline-block; 
  4.     width: 200px; 
  5.     height: 200px; 
  6.   } 
  7.   .box1 { 
  8.     background: red; 
  9.   } 
  10.   .box2 { 
  11.     background: yellow; 
  12.   } 
  13.   .box3 { 
  14.     background: blue; 
  15.   } 
  16.  
  17.   .absolute { 
  18.     position: absolute; 
  19.     top: 30px; 
  20.     left: 30px; 
  21.   } 
  22. </style> 
  23. <body> 
  24.   <div class="box1"></div> 
  25.   <div class="box2 absolute"></div> 
  26.   <div class="box3"></div> 
  27. </body> 

可以看到，中間的 div 會(huì)相對(duì)于 body 進(jìn)行定位，同時(shí)，它原來(lái)的位置也不會(huì)被保留。

固定定位

理解了相對(duì)定位和絕對(duì)定位，固定定位就比較好理解了。固定定位會(huì)相對(duì)于視窗進(jìn)行定位，而且和絕對(duì)定位一樣也會(huì)脫離文檔流。這里寫(xiě)一個(gè)簡(jiǎn)單的例子：

  1. <style> 
  2.   .box { 
  3.     width: 200px; 
  4.     height: 200px; 
  5.     border: 1px solid red; 
  6.     margin: 100px; 
  7.   } 
  8.  
  9.   .fixed { 
  10.     position: fixed; 
  11.     top: 30px; 
  12.     left: 30px; 
  13.     width: 100px; 
  14.     height: 100px; 
  15.     background-color: cadetblue; 
  16.   } 
  17. </style> 
  18. <body> 
  19.   <div class="box"> 
  20.     <div class="fixed"></div> 
  21.   </div> 
  22. </body> 

粘性定位

前面的內(nèi)容都是復(fù)習(xí)，這個(gè)粘性定位確實(shí)是最近剛剛接觸的??，沒(méi)辦法 CSS 太菜了。

粘性定位可以理解為相對(duì)定位和固定定位的縫合，會(huì)出現(xiàn)這個(gè)屬性主要是現(xiàn)在很多 H5 頁(yè)面都會(huì)有這種在頂部固定的導(dǎo)航欄，看來(lái) W3C 也是能看到我們普通開(kāi)發(fā)者的需求的。

  1. .sticky { 
  2.   position: sticky; 
  3.   top: 0; 
  4.   margin-top: 50px; 
  5. } 

當(dāng)我們給一個(gè)元素設(shè)置為粘性定位時(shí)，如果設(shè)置了 top: 0;，粘性定位的元素在它距離視窗頂部大于 0 的時(shí)候，會(huì)按照默認(rèn)布局來(lái)，也就是和相對(duì)定位表現(xiàn)一致。一旦其距離頂部的距離等于 0，這元素會(huì)固定在窗口的這個(gè)地方，此時(shí)的表現(xiàn)和固定布局表現(xiàn)一致。

具體的效果如下：

 

有了這個(gè)屬性就可以少些很多 JavaScript 代碼了，通過(guò)幾行 CSS 就能實(shí)現(xiàn)一起需要引入一個(gè)插件才能實(shí)現(xiàn)的功能。原來(lái)現(xiàn)在的 CSS 已經(jīng)這么厲害了。

 

最近更新公眾號(hào)的頻率明顯下降，而且內(nèi)容也越來(lái)越水了，之前寫(xiě)的 Go 筆記也沒(méi)什么深入的內(nèi)容。最近因?yàn)閾Q城市、換工作，然后也一時(shí)不知道寫(xiě)什么，導(dǎo)致質(zhì)量有明顯的下降，后面會(huì)慢慢恢復(fù)周更，然后會(huì)多寫(xiě)一點(diǎn)前端框架和工程化方面的東西，共勉。

 

責(zé)任編輯：武曉燕 來(lái)源： 自然醒的筆記本
CSSPosition定位
相關(guān)推薦

2024-05-20 09:27:00

Web 開(kāi)發(fā)CSS

2024-12-17 08:33:42

2023-05-22 15:37:31

CSS元素JavaScript

2022-04-14 09:01:19

CSS父選擇器CSS類

2023-08-14 15:56:52

CSS 偽元素開(kāi)發(fā)

2020-10-12 08:20:54

CSS居中內(nèi)聯(lián)

2017-10-10 13:58:38

前端CSS濾鏡技巧

2020-06-12 09:20:33

前端Blob字符串

2020-07-28 08:26:34

WebSocket瀏覽器

2011-09-15 17:10:41

2022-10-13 11:48:37

Web共享機(jī)制操作系統(tǒng)

2009-12-10 09:37:43

2021-02-01 23:23:39

FiddlerCharlesWeb

2021-02-28 08:34:14

CSS outline-off負(fù)值技巧

2018-06-20 00:30:06

2021-10-19 14:49:49

CSS前端

2010-08-23 09:56:09

Java性能監(jiān)控

2024-01-08 07:11:35

2021-11-15 07:47:39

InnoDB緩存池磁盤

2020-09-15 08:35:57

TypeScript JavaScript類型
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號(hào)