在大厂面试中，他们看中的不仅仅是你有多么高级的技术。相反的，越好的公司，越注重你的底层基础。
这次，我们来讲许多大厂都会考的，关于定位的问题。
首先，让我们来分析，你从这张图片中看到了什么？
以正常的视角，我们看到了一个盒子，里面有两个块级元素和两个行内元素，构成了这个页面。
只是，这样的回答，真的够完整，细致吗？
position和文档流
让我们结合代码来观察一下
<body>
<div style="border:1px solid black">div1</div>
<div style="border:1px solid red">div2</div>
<span>这是一张图片</span>
<img src="https://img1.baidu.com/it/u=882771668,2484867819&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500"
</body>
在所有人的潜意识里，代码的运行规律都是从上到下，从左到右的，从内到外，这样的运行规律有一个名称，叫做
文档流。
文档流（Document Flow）通常是指在计算机科学领域中，特别是在文本处理和排版系统中，文档元素按照一定的规则自动排列的方式。这些规则通常是由特定的标记语言（如HTML、LaTeX等）或样式表语言（如CSS）定义的。文档流决定了页面上各个元素的位置和布局。
让我们再根据一段代码来分析一下文档流
<style>
// 页面reset
*{
margin: 0;
padding: 0;
}
#box1{
margin: 20px;
width:200px;
height: 200px;
background-color: green;
padding: 5px;
border: 1px solid red;
}
#box2{
margin: 10px;
width:300px;
height: 300px;
background-color: yellow;
}
</style>
此时我们得到的结果是这样的
此时我们使用的是默认的静态定位position：static按照默认的从页面坐标0，0的位置按文档流排序，从上到下先输出box1再输出box2，再加上我们设置的属性margin，形成这样的页面。
但如果我们在box1中添加这样几行代码，会发生什么呢？
position: relative;
top: 30px;
left: 20px;
此时，我们得到这样的结果，这是为什么呢？
这个时候，我们把默认的静态定位改成了相对定位(relative),这样改没有脱离文档流。元素依然它的正常位置定位，但会受到top,left,right，bottom属性影响，但依然占据原来相同大小的空间。
让我们再修改一下
让我们将relative改成absolute
此时我们又从relative(相对定位)改成了absolute(绝对定位)，此时我们的元素脱离了文档流，找到最近的 祖先有定位节点的元素，如果没有找到的话 相对于body 定位。此时因为box2有更大的像素，所以会呈现box2包围box1的现象。
我们再添加一个box3元素，来更好区分relative和absolute
#box3{
width: 50px;
height: 50px;
background-color: pink;
position: relative;
top:10px;
left: 10px;
}
我们把他嵌套在box2中
<div id ="box2">
<div id="box3">box3</div>
</div>
此时box3的定位是relative
可以看到box3被包含在box2中。遵循文档流定位。
若把定位改成absolute，则变成
此时box3脱离了文档流，按照父类，也就是box2的定位元素定位，因为box2是默认的static定位，则在页面0，0处定位，形成这样的结果。
position还有两种定位叫做fixed和sticky，这两个不常考，这里就不过多的介绍。有兴趣的可以自行查找相关资料。
结语
这就是一个大厂常考题的详细回答，当问起你时。要按照定位方式，是否遵循文档流，元素属性和内容几个方面进行回答，千万不要只回答表面。希望大家都能通过面试去大厂~
