共计 4873 个字符，预计需要花费 13 分钟才能阅读完成。
这篇文章，咱们学习一个新的布局办法——定位。
定位在网站布局中随处可见，像地图的标记点，电商网站的各种标识和按钮，浮动快捷入口，吸附导航等等成果。
position 属性指定了一个元素定位形式，它有五个不同的类型值：static 动态定位，relative 绝对定位，fixed 固定定位，absolute 相对定位，sticky 粘性定位。给元素设置了 position 属性后，再应用 top、bottom、left 和 right 属性对元素进行定位。
咱们先来学习绝对定位。
position 属性值 relative，能够设置元素为绝对定位，绝对定位有什么特点呢？咱们通过例子来看。
创立 position.html 文件和 position-style.css 文件。关上 html 文件，构建根底代码，引入内部款式。在 body 里输出 emmet 命令：div.container>(div[class=box$]{盒子 $})*3，回车。在一个大的容器里创立了三个小盒子。
HTML
<body>
<div class="container">
<div class="box1">
盒子 1
</div>
<div class="box2">
盒子 2
</div>
<div class="box3">
盒子 3
</div>
</div>
</body>关上 css 文件，定义通用选择器，申明款式 box-sizing: border-box。定义分组选择器 html, body，申明款式 height: 100%，让 html 和 body 撑满整个页面。定义选择器 body，申明款式 margin: 0，去除 body 的外边界。
给内部容器里的三个盒子（.container > div）定义款式：float: left，width: 150px，height: 150px，border: 1px solid black，line-height: 150px，text-align: center，固定的宽高，1 像素的边框，文本程度垂直居中，程度横向排列。
为了打消浮动对其余容器的影响，给 container 定义伪元素（.container::after），申明款式为：content: “”，clear: both，display: block。
再别离给 box1 增加背景色彩 orange，给 box2 增加背景色彩 skyblue，给 box3 增加背景色彩 hotpink。
CSS
* {box-sizing: border-box;}
html, body {height: 100%;}
body {margin: 0;}
.container > div {
float: left;
width: 150px;
height: 150px;
border: 1px solid black;
line-height: 150px;
text-align: center;
}
.container::after {
content: "";
clear: both;
display: block;
}
.box1 {background-color: orange;}
.box2 {background-color: skyblue;}
.box3 {background-color: hotpink;}到浏览器里看一下成果，三个用来试验的盒子就做好了。
回到 css，咱们给 box2 增加款式 position: relative，让它绝对定位。
此时，咱们发现盒子 2 没有任何变动。
再回到 css，给 box2 增加款式 left: 50px，top: 50px。
CSS
.box2 {
position: relative;
left: 50px;
top: 50px;
}再来看成果，盒子 2 向右和向下各偏移了 50px，并盖在了盒子 3 的下面。
通过这个试验，咱们总结绝对定位的几个特点：第一，position: relative ruai 定位款式须要配合 left、top、right、bottom 这些定位属性能力失效。第二，relative 绝对的是容器本身的屏幕坐标 0,0 点。第三，容器地位产生位移后，原来占据的空间仍然保留。第四，默认会笼罩没有定位的容器。
接下来学习相对定位。
正文掉绝对定位的款式代码。给 box2 增加款式 position: absolute，让它相对定位。
CSS
.box2 {position: absolute;}在浏览器里察看成果，盒子 1 怎么隐没了？原来，当一个容器为相对定位时，它会脱离文档流，盒子 2 盖在了盒子 1 的下面。
给 box2 增加款式 left: 50px，top: 50px。
CSS
.box2 {
position: absolute;
left: 50px;
top: 50px;
}再看看成果，盒子 1 显露出来了，盒子 2 向右和向下各偏移了 50px，盖在了两个盒子的下面。
这里有个问题，盒子 2 曾经脱离了文档流，它位移坐标的参照点是哪里呢？目前看，它是绝对于窗口的屏幕坐标 0,0 点。再做一个试验。
回到 css，给内部容器 container 申明款式 display: inline-block，margin-top: 100px，margin-left: 100px，让它向下向右偏移 100px 的间隔。显示属性设置为 inline-block，是为了避免 margin 塌陷。
再仔细观察一下成果，盒子 2 确实是绝对于窗口左上角产生了位移，窗口对应的元素就是 body 了。这阐明，默认状况下，相对定位的参照点是 body 元素的坐标起始点。
能够批改相对定位元素的参照点吗？咱们再做一个试验。
回到 css，给 container 增加款式 position: relative，也就是给盒子 2 的父元素增加了一个绝对定位。
再看一下成果，盒子 2 绝对于它的父容器定位了。
如果把 container 的定位款式值改为 absolute，成果如何呢？
咱们看，盒子 2 的地位没有发生变化。这阐明，盒子 2 定位的参照元素只有设置了定位属性，无论是哪一种定位形式都能够。但 static 动态定位例外，其实，static 示意元素为动态定位，也就是和不给元素增加 position 属性是等价的。
比方，正文掉 container 容器的定位属性。
此时，盒子 2 又绝对于 body 来定位了。
如果再增加款式 position: static。
成果是一样的。
你可能还会问，相对定位只参照父元素和 body 来定位吗？咱们再做一个试验。
回到 html，在 container 内部再增加一个父元素 div，定义属性。
HTML
<div class="outer">
<div class="container">
<div class="box1">
盒子 1
</div>
<div class="box2">
盒子 2
</div>
<div class="box3">
盒子 3
</div>
</div>
</div>回到 css，给 outer 增加款式：display: inline-block，width: 600px，height: 500px，background-color: aliceblue，margin-left: 100px，margin-top: 100px，定义最内部容器的宽高，背景色彩，并向右下方设置 100px 的地位偏移。
CSS
.outer {
display: inline-block;
width: 600px;
height: 500px;
background-color: aliceblue;
margin-left: 100px;
margin-top: 100px;
}此时，盒子 1 和 盒子 3 随着整个盒子产生偏移，盒子 2 还是绝对 body 定位。
正文掉 container 的定位款式，从新设置它为相对定位。再给 outer 申明一个 position: relative 款式。当初，box2 的父容器和先人容器都设置了定位，它会参照谁来定位呢？
很显然，盒子 2 绝对于父容器来定位了
如果正文掉父容器 container 的定位款式。盒子 2 绝对于先人元素 outer，还是绝对于 body 来定位呢？
答案不言而喻，绝对于 outer 定位了。
再去掉 outer 的定位款式。盒子 2 又绝对于 body 定位了。
通过相对定位的这些试验，咱们总结相对定位的几个特点：第一，相对定位的元素会脱离文档流。第二，相对定位的参照点为，有定位设置的离他最近的先人元素的 0,0 点坐标。第三，相对定位的容器默认会笼罩没有定位的容器。接下来学习固定定位。正文掉 box2 的定位相干款式。增加款式：position: fixed，right: 0，top: 100px，定义 box2 为固定定位，地位紧贴参照容器右侧
CSS
.box2 {
position: fixed;
right: 0;
top: 100px;
}咱们发现，容器 2 绝对于 body 定位了。其实，它只绝对于 body 定位。
即便先人元素有定位，比方关上父容器 container 的定位款式正文。
咱们看，容器 2 的地位仍然不变。你会说，这不是和相对定位相似嘛，是的，固定定位其实就是相对定位的特例。那它有什么非凡用处呢？
回到 css，给 body 增加 2000px 的高度。
CSS
body {height: 2000px;}滚动页面，咱们发现：盒子 2 仍旧固定不动。
你在浏览器网站时，是不是见过这个成果呢？
通过试验，咱们总结固定定位的特点：第一、固定定位的元素是绝对于浏览器视口定位的，这意味着即便页面产生滚动，它也始终保持在同一个地位。第二、top、right、bottom 和 left 属性被用来定位元素，但不是必须的。
最初来学习粘性定位。它会产生动态效果，很像 static 和 fixed 的联合：某些状态下是 static 定位，某些状态下主动变成了 fixed 定位。
回到 css，正文掉 box2 里的定位款式，增加款式：position: sticky，top: 100px。
动态预览没有成果，滚动一下窗口，也没有啥特殊效果。
个别状况下，粘性定位没有成果，有几个起因：第一、父元素不能增加 overflow: hidden 或者 overflow: auto 属性。第二、元素本身必须申明 top、bottom、left、right 一个或多个属性，否则就相当于动态定位了。第三，父元素的高度不能低于 sticky si tei k 定位元素的高度。第四，sticky 定位元素仅在其父元素内失效。
仔细检查一下，应该是第三个起因。父容器如果滚动起来，就能看到成果了。
回到 html，在 body 里增加一个新的 div 容器，定义 属性，填入一些文本。
CSS
<div class="box4"> 盒子 4 </div>回到 css，正文掉 box2 的定位款式。定位选择器 .box4，申明款式：height: 30px，background-color: darkgrey，margin-top: 20px，text-align: center，line-height: 30px，定义容器的根本款式。position: sticky，top: 0，定义容器为粘性定位。
CSS
.box4 {
height: 30px;
background-color: darkgrey;
margin-top: 20px;
text-align: center;
line-height: 30px;
position: sticky;
top: 0;
}咱们来看一下成果：当滚动页面时，开始一段时间盒子 4 体现的和一般容器一样，随着页面滚动而滚动，当它间隔父容器顶部，达到咱们在款式里设置的定位值的时候，这里是 top: 0，就体现为固定定位了。
须要留神，这里的 top: 0，指的是当容器为固定定位状态时，绝对于父容器的顶部的间隔，并不是容器初始定位。比方，把 top 的值改为 100px。咱们看，盒子 4 初始地位并没有什么变动。当滚动页面时，盒子 4 达到了间隔父容器顶部 100px 的地位，就固定不动了。
通过试验，咱们总结粘性定位的几个特点：第一，粘性定位初始状态相当于 static 定位。第二，绝对于父容器的定位条件合乎时，容器变现为固定定位。第三，top、right、bottom 或 left 至多申明一个，粘性定位能力失效。
本篇文章配套的教程链接：https://www.bilibili.com/vide…
