14.CSS定位

.元素的定位屬性

元素的定位屬性主要包括定位模式和邊偏移兩部分。

1）定位模式(定位的分類)

在CSS中，position屬性用于定義元素的定位模式，其基本語法格式如下：

選擇器{position:屬性值;}

position屬性的常用值：

static：自動定位（默認定位方式）
relative：相對定位，相對于其原文檔流的位置進行定位
absolute：絕對定位，相對于其上一個已經定位的父元素進行定位
fixed：固定定位，相對于瀏覽器窗口進行定位

2）邊偏移

top：頂端偏移量
bottom：底部偏移量
left：左側偏移量
right：右側偏移量

也就說，以后定位要和這邊偏移搭配使用了，比如 top: 100px; left: 30px; 等等

2.靜態定位(static)

靜態定位是所有元素的默認定位方式，當position屬性的取值為static時，可以將元素定位于靜態位置。所謂靜態位置就是各個元素在HTML文檔流中默認的位置。

上面的話翻譯成白話：就是網頁中所有元素都默認的是靜態定位哦！其實就是標準流的特性。

在靜態定位狀態下，無法通過邊偏移屬性（top、bottom、left或right）來改變元素的位置。

靜態定位唯一的用處：就是取消定位。position: static;

3.相對定位(relative)

相對定位是將元素相對于它在標準流中的位置進行定位，當position屬性的取值為relative時，可以將元素定位于相對位置。

對元素設置相對定位后，可以通過邊偏移屬性改變元素的位置，但是它在文檔流中的位置仍然保留。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        .dv1 {            width: 100px;            height: 100px;            background-color: red;            position: relative;            left: 120px;            top: 100px;        }        .dv2 {            width: 100px;            height: 100px;            background-color: blue;        }</style></head><body>    <div class="dv1"></div>    <div class="dv2"></div></body></html>

注意：

相對定位最重要的一點是，它可以通過邊偏移移動位置，但是原來的所占的位置，繼續占有。
其次，每次移動的位置，是以自己的左上角為基點移動（相對于自己來移動位置）

就是說，相對定位的盒子仍在標準流中，它后面的盒子仍以標準流方式對待它。（相對定位不脫標）

如果說浮動的主要目的是讓多個塊級元素一行顯示，那么定位的主要價值就是移動位置，讓盒子到我們想要的位置上去。

4.絕對定位(absolute)

如果文檔可滾動，絕對定位元素會隨著它滾動，因為元素最終會相對于正常流的某一部分定位。

當position屬性的取值為absolute時，可以將元素的定位模式設置為絕對定位。

絕對定位最重要的一點是，它可以通過邊偏移移動位置，但是它完全脫標，完全不占位置。

若所有父元素(祖先)都沒有定位，以瀏覽器當前屏幕為準對齊(document文檔)，相對于body。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        .dv1 {            width: 100px;            height: 100px;            background-color: blue;            position: absolute;            left: 130px;            top: 50px;        }        .dv2 {            width: 120px;            height: 120px;            background-color: red;        }</style></head><body>    <div class="dv1"></div>    <div class="dv2"></div></body></html>

若所有父元素(祖先)有定位，依據最近的已經定位（絕對、固定或相對定位）的父元素（祖先）進行定位。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        .dv1 {            width: 120px;            height: 120px;            background-color: blue;            position: absolute;        }        .dv2 {            width: 80px;            height: 80px;            background-color: red;            position: absolute;            top: 0;        }</style></head><body>    <div class="dv1">        <div class="dv2"></div>    </div></body></html>

子絕父相

這句話的意思是子級是絕對定位的話，父級要用相對定位。

絕對定位是將元素依據最近的已經定位（絕對、固定或相對定位）的父元素（祖先）進行定位。就是說，子級是絕對定位，父親只要是定位即可（不管父親是絕對定位還是相對定位，甚至是固定定位都可以）。但是為什么會有“子絕父相”這個詞呢？

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        .parent1 {            width: 100px;            height: 100px;            background-color: red;        }        .parent2 {            width: 100px;            height: 100px;            background-color: pink;            position: relative;        }        .parent3 {            width: 100px;            height: 100px;            background-color: blue;        }        .child {            width: 50px;            height: 50px;            background-color: green;            position: absolute;            top: 20px;        }</style></head><body>    <div class="parent1"></div>    <div class="parent2">        <div class="child"></div>    </div>    <div class="parent3"></div></body></html>

因為子級是絕對定位，不會占有位置，可以放到父盒子里面的任何一個地方。

父盒子布局時，需要占有位置，因此父親只能是相對定位。

這就是子絕父相的由來。

絕對定位的盒子水平/垂直居中

設置left,top值均為50%,同時margin-left設置為絕對定位元素(要居中的元素)width的一半取負,margin-top設為其height的一半取負。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        .parent {            width: 300px;            height: 200px;            background-color: blue;            position: relative;        }        .child {            width: 100px;            height: 70px;            background-color: red;            position: absolute;            left: 50%;            top: 50%;            margin-left: -50px;            margin-top: -40px;        }</style></head><body>    <div class="parent">        <div class="child"></div>    </div></body></html>

5.固定定位(fixed)

固定定位是絕對定位的一種特殊形式，類似于正方形是一個特殊的矩形。它以瀏覽器窗口作為參照物來定義網頁元素。當position屬性的取值為fixed時，即可將元素的定位模式設置為固定定位。

當對元素設置固定定位后，它將脫離標準文檔流的控制，始終依據瀏覽器窗口來定義自己的顯示位置。不管瀏覽器滾動條如何滾動也不管瀏覽器窗口的大小如何變化，該元素都會始終顯示在瀏覽器窗口的固定位置。

固定定位有兩點：

固定定位的元素跟父親沒有任何關系，只認瀏覽器。
固定定位完全脫標，不占有位置，不隨著滾動條滾動。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        .dv1 {            width: 50px;            height: 50px;            background-color: red;            position: fixed;            right: 50px;            bottom: 50px;        }        .dv2 {            width: 50px;            height: 2000px;            background-color: blue;        }</style></head><body>    <div class="dv1"></div>    <div class="dv2"></div></body></html>

6.四種定位總結

文公眾號來源：01二進制作者：雇個城管打天下
記得在面試的時候也被問到這題，當時答得并不好，這道題目其實可以挖掘很多的知識點出來，建議閱讀！

前幾天有個學妹問我為什么在瀏覽器里面輸了網址就會顯示出來頁面，雖然這個現象很常見，但是要想解釋清楚確實有些小困難，當時也只是簡單的回答了她，現在想趁著這個機會好好整理下相關知識。整理完才覺得其實就和我們去一個地方找人是一個道理。所以說藝術源于生活卻又高于生活，技術同樣如此。

在回答這個問題前，我們先來了解下我們平常說的那個網址到底是啥？

網址的學名叫做統一資源定位符（Uniform Resource Locator，常縮寫為URL），我們知道現在的互聯網其實就是由眾多資源所構成的一張巨大的網，如何定位那些資源就是靠的URL，因此我們也可以把URL理解為是網絡上資源的“門牌號“，我們在瀏覽器中輸入網址，就相當于開一輛車（瀏覽器）去找一個地址（URL）

1. 緩存查找

如果你要出門找一個地方，第一想法肯定是先想這個地方你有沒有去過，你要是去過的話那就不需要問人直接過去就好了。我們的系統也是這么想的。當你在瀏覽器中輸入了URL之后，瀏覽器會先查看 瀏覽器緩存 中有沒有這個地址，如果沒有那就再去 系統緩存，如果系統緩存還沒有，那就去路由器緩存找，總之只要緩存中有，就說明有這個資源，那瀏覽器直接顯示出來就好了。

Tips： 這里說下 hosts文件 ， hosts 是一個沒有擴展名的系統文件，可以用記事本等工具打開，其作用就是將一些常用的網址域名與其對應的IP地址建立一個關聯“數據庫”，當用戶在瀏覽器中輸入一個需要登錄的網址時，系統會首先自動從 hosts 文件中尋找對應的 IP 地址，一旦找到，系統會立即打開對應網頁，如果沒有找到，則系統會再將網址提交 DNS 域名解析服務器進行IP地址的解析。需要注意的是， hosts文件配置的映射是靜態的，如果網絡上的計算機更改了請及時更新IP地址，否則將不能訪問。

2. DNS 解析

如果你認得去那個地址的路自然是最好，那如果你根本就沒去過那咋辦？肯定會有人說導航，但并不是所有的地方都是導航能搜到的，這個時候我們自然而然就會想著去問路人了。瀏覽器也是這樣的，如果在本地緩存中沒有找到想要的資源，那就只能去其他網絡上的機器中尋找我想要的資源了。那你怎么知道你要的資源在那臺機器上？這時， DNS就橫空出世了。

DNS（Domain Name System，域名系統），DNS解析的過程就是尋找哪臺機器上有你需要資源的過程。當你在瀏覽器中輸入一個地址時，例如 www.baidu.com，其實這段URL并不是真正意義上的地址。互聯網上每一臺計算機的唯一標識是它的 IP 地址（比如127.0.0.1就是我們本機的 IP 地址），但是 IP 地址并不方便記憶（畢竟都是很長的數字串），所以也就出現了網址（URL）這個玩意了，目的就是為了方便普通用戶去尋找網絡上的其他計算機。所以 DNS 實際上充當了一個翻譯的角色，將網址翻譯成 IP 地址（就跟我想去南京大學，問路的那個人告訴我南京大學在廣州路上是一個道理）。

2.1 DNS 解析過程

DNS解析其實是一個遞歸查詢的過程：

在上述過程中，首先在本地域名服務器中查詢 IP 地址，如果沒有找到，本地域名服務器會向根域名服務器發送一個請求，如果根域名服務器也不存在該域名時，本地域名會向com頂級域名服務器發送一個請求，依次類推下去。直到最后找到目標網址所對應的 IP，并將其緩存到本地，以供下次使用。

2.2 DNS負載均衡

在講DNS負載均衡前先來看張圖片：

看到這可能就會有人犯嘀咕了，我們不是 ping 的同一個網址嗎，為啥兩次IP都不一樣啊？其實原因很簡單，如果每次都一樣是否說明你請求的資源都位于同一臺機器上面，那么這臺機器需要多高的性能和儲存才能滿足億萬請求呢？其實真實的互聯網世界背后存在成千上百臺服務器，大型的網站甚至更多。但是在用戶的眼中，它需要的只是處理他的請求，哪臺機器處理請求并不重要。 DNS可以返回一個合適的機器的IP給用戶，例如可以根據每臺機器的負載量，該機器離用戶地理位置的距離等等，這種過程就是DNS負載均衡，又叫做DNS重定向。

再來舉個例子，如果你在新街口用地圖搜南京大學，返回給你的第一條數據可能就是南京大學鼓樓校區（因為距離最近），但如果你是在仙林用地圖搜南京大學，返回給你的第一條數據就有可能是南京大學仙林校區了。 DNS負載均衡簡單來說也是這個道理。

2.3 DNS 污染

DNS 污染（DNS cache pollution），又稱域名服務器緩存投毒（DNS cache poisoning），是指一些刻意制造或無意中制造出來的域名服務器數據包，把域名指往不正確的IP地址。

某些網絡運營商為了某些目的，對DNS進行了某些操作，導致上網的用戶無法通過域名取得正確的IP地址。某些國家或地區出于某些目的為了防止某網站被訪問，而且其又掌握部分國際DNS根目錄服務器或鏡像，也會利用此方法進行屏蔽。（Google、 Facebook等）

至于如果防止DNS污染，這里只說一個方法就是修改hosts文件，其他的自行搜索吧。

3. TCP連接

其實在上面DNS解析的圖中就已經有了TCP連接的過程了：

我們通過DNS解析獲取到了網址所對應的IP地址后，便需要發起TCP連接請求，這里總共需要三次握手，具體的過程就不贅述了，可以查閱相關資料，這里推薦劉欣老師的《TCP/IP 之大明王朝郵差》，以及大學計算機網絡課本里面的TCP相關章節。

4. HTTP 請求

握手成功后，瀏覽器就可以向服務器發送http請求了，請求數據包。 發送HTTP請求的過程就是構建HTTP請求報文并通過TCP協議中發送到服務器指定端口(HTTP協議80/8080, HTTPS協議443)。HTTP請求報文是由三部分組成: 請求行,請求報頭和請求正文。

4.1 請求行

格式如下:

Method
 
RequestURL
 
HTTPVersion
 CRLF

例如：

GET index
.
html HTTP
/
1.1

常用的方法有: GET,POST,PUT,DELETE,OPTIONS,HEAD。

4.2 請求報頭

請求報頭允許客戶端向服務器傳遞請求的附加信息和客戶端自身的信息。

Tips：客戶端不一定特指瀏覽器，有時候也可使用Linux下的CURL命令以及HTTP客戶端測試工具等。

常見的請求報頭有: Accept,AcceptCharset,AcceptEncoding,AcceptLanguage,ContentType,Authorization,Cookie,UserAgent等。

上圖是使用Chrome開發者工具截取的對百度的HTTP請求以及響應報文，從圖中可以看出，請求報頭中使用了Accept, AcceptEncoding, AcceptLanguage, CacheControl, Connection, Cookie等字段。 Accept 用于指定客戶端用于接受哪些類型的信息， AcceptEncoding 與 Accept 類似，它用于指定接受的編碼方式。Connection 設置為 Keepalive 用于告訴客戶端本次 HTTP 請求結束之后并不需要關閉 TCP 連接，這樣可以使下次 HTTP 請求使用相同的 TCP 通道，節省 TCP 連接建立的時間。

5. 服務器響應

這部分對應的就是后端工程師眼中的 HTTP。后端從在固定的端口接收到 TCP 報文開始，這一部分對應于編程語言中的 socket。它會對 TCP 連接進行處理，對 HTTP 協議進行解析，并按照報文格式進一步封裝成 HTTP Request對象，供上層使用。這一部分工作一般是由 Web 服務器去進行，常用的Web服務器有 Tomcat, IIS 和 Netty 等等。

HTTP響應報文也是由三部分組成: 狀態碼, 響應報頭和響應報文。篇幅原因這里就不詳細展開了。

6. 瀏覽器解析網頁信息

服務器返回給瀏覽器的文本信息，通常是 HTML, CSS, JS, 圖片等文件，那么瀏覽器是如何對澤瀉內容進行渲染呢？通常是下面五個步驟：

處理 HTML 標記并構建 DOM 樹。
處理 CSS 標記并構建 CSSOM 樹。
將 DOM 與 CSSOM 合并成一個渲染樹。
根據渲染樹來布局，以計算每個節點的幾何信息。
將各個節點繪制到屏幕上。

不過這五個步驟在不同內核的瀏覽器中執行細節是不同的，想深入了解的可以查閱相關資料，這里推薦一篇文章：《瀏覽器渲染頁面過程與頁面優化》（https://segmentfault.com/a/1190000010298038）

瀏覽器是一個邊解析邊渲染的過程。首先瀏覽器解析HTML文件構建DOM樹，然后解析CSS文件構建渲染樹，等到渲染樹構建完成后，瀏覽器開始布局渲染樹并將其繪制到屏幕上。

JS的解析是由瀏覽器中的 JS 解析引擎完成的。 JS是單線程運行，也就是說，在同一個時間內只能做一件事，所有的任務都需要排隊，前一個任務結束，后一個任務才能開始。但是又存在某些任務比較耗時，如IO讀寫等，所以需要一種機制可以先執行排在后面的任務，這就是：同步任務(synchronous)和異步任務(asynchronous)。 JS的執行機制就可以看做是一個主線程加上一個任務隊列(task queue)。同步任務就是放在主線程上執行的任務，異步任務是放在任務隊列中的任務。所有的同步任務在主線程上執行，形成一個執行棧; 異步任務有了運行結果就會在任務隊列中放置一個事件；腳本運行時先依次運行執行棧，然后會從任務隊列里提取事件，運行任務隊列中的任務，這個過程是不斷重復的，所以又叫做事件循環(Event loop)。如下圖所示：

7. 總結

當上述步驟執行完成后我們便可在瀏覽器中看到一個完整的頁面了，總結下其實就只有幾步：

瀏覽器地址欄輸入url
瀏覽器會先查看瀏覽器緩存系統緩存路由緩存，如有存在緩存，就直接顯示。如果沒有，接著第3步
域名解析（DNS）獲取相應的 IP
瀏覽器向服務器發起 tcp 連接，與瀏覽器建立 tcp 三次握手
握手成功，瀏覽器向服務器發送 http 請求，請求數據包
服務器請求數據，將數據返回到瀏覽器
瀏覽器接收響應，讀取頁面內容，解析 html 源碼，生成 Dom 樹
解析 css 樣式、瀏覽器渲染， js交互

其實簡單來看這幾個過程并不是很復雜，但是每個步驟都可以深挖出一大堆的知識，比如DNS的優化、頁面渲染的優化、 HTTPS等等非常多的東西，這里考慮到篇幅以及科普效果很多東西都一筆帶過了。

微信公眾號【程序員喬戈里】作者喬戈里，斜杠青年，哈工大本碩985 碩士，百度Java 研發工程師，目前致力于分享求職必備學習經驗、求職心得和成長感悟/技術文章。（關注公眾號送9000G 考研/python/C++/java/前端/小程序/微信公眾號/機器學習/人工智能資源）

輯導語：前段時間，有很多博主因為IP屬地問題“翻車”，而是否展示IP屬地也引發了廣大網友的討論。為什么各大平臺突然集體展示賬號IP屬地？這項功能有什么意義？本篇文章中，作者給出了答案，我們一起來看看吧。

最近，各大平臺網站陸續公開了賬號IP屬地。對于這項新的政策，網上主流觀點都持支持態度。為什么突然間各大平臺網站很有默契的同時開發且執行了公開賬號IP屬地這項功能，這對產品設計工作會有怎樣的影響，在這里一站式分享與你。

一、關于展示IP地址的相關規定

關于IP屬地展示，最早提出是為了網絡言論的實名化，即通過展示言論屬地IP來對不良網絡言論行為進行威懾，達到清朗網絡環境的目的。

所以國家互聯網信息辦公室在2010年10月提出《互聯網用戶賬號名稱信息管理規定（征求意見稿）》，其中十二條明確規定：

“互聯網用戶賬號服務平臺應當以顯著方式，在互聯網用戶賬號信息頁面展示賬號IP地址屬地信息。境內互聯網用戶賬號IP地址屬地信息需標注到省（區、市），境外賬號IP地址屬地信息需標注到國家（地區）。”

但這里需要注意，這是一個征求意見稿，所以并不是本次執行的法規依據。

通俗地講就是問問大家意見，這樣規定行不行，如果覺得不行那再修改修改。

雖然不是執行文件，但是也表達了國家對IP展示方案的意向。

而此次各大平臺突然開發展示賬戶IP屬地的真正原因是今年4月中央網信辦開展的“清朗·網絡暴力專項治理行動”

總而言之，目前并未有強制的法規要求平臺系統對賬號做地域展示，目前的展示主要也是用于響應國家關于網絡環境的相關號召，或者是一種試運行狀態。

二、我們為什么需要了解

既然沒有要求，那知道這些對我們是否還有意義？

1. 只是一個高曝光的知識點

既然主流的內容平臺都已經上線此功能，那么在各種需求會議上和日常工作交流中就有可能會被不經意地提及。

雖然不是復雜的需求，但也是需求，是需求就需要處理。

而全面了解此功能的背景與現狀是我們從容應對需求的基礎，同時也能表現自己的產品全面性與專業性，因為功能小，所以容易因擴展的回答制造驚喜。

2. 這是一個風險點，而且可能是法律風險點

不知道大家是否有這樣的經歷，在規劃產品或者項目的時候，難免會遇到一道填空題，一道關于風險的填空題。

填的太真實，影響項目立項或者推進，填的太敷衍，容易被diss說沒經驗；假如選擇抄取前輩的“答案”，又擔心前輩變成評審會的參與方。

而現在就有一個現成的答案，既能政治正確又沒啥成本。

3. 這是一個小成本功能點

說到成本，我想為了各項合規而開發的功能中，展示IP是相對成本小的一個功能，甚至大部分系統的會員數據里面本來就擁有IP數據，甚至還有定位數據，而且還不用改變業務流程。

小成本功能是能很好地增加產品的靈活性。

4. 這是未來的趨勢

關于網絡環境治理，只會越來越規范。

關于IP屬地展示規定的試水，目前的主流觀點是持支持態度，所以大概率我們還是會迎來需要強制展示IP歸屬地的那一天，就像現在的域名備案一樣成為常態化硬性要求。

三、產品設計需要注意的事項

1. 當前的主流設計

我整理了、知乎、貼吧、小紅書和快手的功能對比，總結下來主要是在三個位置做IP屬地的展示，分別是【作者主頁】、【文章頁】、【評論區】，詳細情況我已分別對上述各個平臺做了截圖介紹。

同樣是展示功能，各個平臺對于展示這件事的解釋有各自的理解：

頭條和知乎沒發現常態化對用戶的解釋型功能
貼吧和快手對IP展示的數據做出了解釋，主要針對的是數據不準確的這種情況，解決方案是需要用戶聯系客服進行溝通
小紅書做的則特別小心，明確彈窗說明增加IP屬地展示是為了維護網絡安全且數據來源于運營商，是目前我能找到解釋最全面的，從原因和數據準確性兩個維度都對用戶做了常態化的解釋。

2. 數據邏輯

IP屬地展示的數據源是來自于系統對用戶發生行為的時候獲取的IP地址數據進行展示，所以主要分為兩種：

（1）博主IP

博主IP位置數據：根據賬號注冊時的IP屬地進行存儲展示，即在博主注冊但未發表作品的狀態下展示對應的IP位置，后期根據發布作品時的IP位置做對應的統計得出博主IP位置。主要參考的邏輯是在設定的時間段內作品發布時的IP統計和注冊IP屬地加權計算取值。

（2）作品和評論IP

用戶作品和評論的IP來源則是根據發布時的實際IP地址歸屬獲取并展示。

3. 展示位置與樣式設計思路

（1）博主IP

關于博主IP，目前看下來大家主要是以完成功能為主，但是值得參考的是快手的實踐。

快手將用戶自己設置的地址與IP地址結合，在主頁面是展示省份+城市。

但是這個數據其實是博主自己設置的數據，點擊進去則會展示IP地址與博主自己設置的地址。

正常情況下用戶查看時兩個數據是對應的，如果有不誠實的情況，則也暴露的很明顯。而且其他的平臺主要還是在博主信息區對地址做展示。

（2）作品IP

目前看到的所有的作品詳情頁關于IP地址的展示都是不明顯的，但是這很合理，因為用戶進來看的是內容又不是定位信息。

對于文章類的就兩個思路，一種是在文章頭部展示，另一種是在文章尾部做展示，基本做到頁面和諧即可。

（3）評論IP

關于評論IP屬地的展示，各個平臺的展示思路高度一致，在原來頁面展示評論時間的后面直接追加對應的IP屬地，省力又和諧。

4. 其他

IP屬地的展示深度只能到省份級別，直轄市則展示城市名。

用戶解釋文案：

“IP屬地以運營商信息為準，如果有問題可咨詢客服”；
“為維護網絡安全、保障良好生態和社區的真實性，根據網絡運營商數據，展示用戶IP屬地信息”。

四、寫在最后

截止至我發文的時間，IP屬地展示功能了解即可，如果未來剛好遇到的真的要上這個功能，那希望也能為你提供一點點幫助。

參考資料：

1、中央網信辦：http://www.cac.gov.cn/2022-04/24/c_1652422681278782.html

2、國家互聯網信息辦公室官網：http://www.cac.gov.cn/2021-10/26/c_1636843202454310.html

本文由 @瑞見釘錘原創發布于人人都是產品經理，未經許可，禁止轉載。

題圖來自 Unsplash，基于CC0協議

在線咨詢

上一篇：3D電影院座位在線選座代碼！每個座位的觀影效果一目了
下一篇：網站中的網站地圖怎么制作？

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商