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小时内与您取得联系。

整合营销服务商