文章详细介绍了CSS中的定位机制，包括静态、相对、绝对、固定和粘性定位的概念、特点以及应用场景。特别强调了绝对定位和固定定位在实现元素自由移动和固定位置上的作用，以及如何利用边偏移和z-index进行元素的堆叠和居中布局。此外，还对比了浮动与定位的区别，帮助理解各种定位方式在网页设计中的适用情况。
目录
1.定位
1.1为什么需要定位
设想一下，如果想要使某个元素在一个盒子内自由移动，并且压住其它的盒子（如下图），使用标准流和浮动能实现吗？实现的方法会不会很复杂呢？
再设想一下，常见的跟随网页滚动的回到顶部按钮，还有csdn页面侧边的导航栏（如下图）用标准流和浮动实现的话效果会不会显得生硬而影响页面美观呢？为了解决这种问题，我们需要学习定位的知识。
1.2定位和浮动的区别
在前面学成在线的案例中，读者应该能意识到，只要涉及内容横向排列的情况，绝大多数都是需要使用浮动的，而定位则是可以让某个盒子在其父盒子内自由移动位置或固定在屏幕中的某个位置，并且可以压住其它盒子。
1.3边偏移
定位=定位模式 + 边偏移
其中边偏移决定了这个元素在盒子中的最终位置。
1.3定位模式
1.3.1静态定位static
静态定位使元素的默认定位。
（图源同上）
1.3.2相对定位relative
特点：
（i）相对定位是元素在移动过程中相对它原来的定位偏移。
（图源同上）
（ii）该元素原来在标准流的位置继续占用，后面的盒子仍然以标准流的方式对待他（不脱标，继续保留原来位置）
示例：
先定义两个div盒子。
给上面的div设置相对定位：
可以看到（i）相对移动是相对原来位置移动；（ii）通过定位移动后的盒子仍保留其原本的位置，且不脱标。
1.3.3绝对定位absolute
绝对定位是元素相对于它的祖先元素来偏移的定位
特点：
（i）如果没有祖先元素或祖先元素没有定位，则以浏览器为祖先盒子来定位；示例：
以上是没有父元素的情况，以下是父元素没有定位的情况：
（ii）如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考点移动位置；
（iii）绝对定位不再占有原先的位置（脱标）。
与相对定位区别：可以认为相对定位是灵魂出窍，形在原地，神可以自由移动；而绝对定位是神在形灭。
1.3.3子绝父相
意思：如果子级使用绝对定位，则父级需要相对定位。
理解：
（i）子级绝对定位，不会占有位置，可以在父盒子里自由移动，不影响其它兄弟盒子；
（ii）父盒子需要加定位，保证子级盒子在父盒子内部移动；
（iii）父盒子布局时，需要占有位置，因此父亲只能是相对定位。
1.3.4学成在线案例补充
目的是实现右上角hot标签这种效果。
html文件补充：
css文件补充：
运行：
1.3.5固定定位fixed
固定定位是元素固定于浏览器可视区的位置，主要使用场景：可以在浏览器滚动时元素的位置不变（侧边目录、返回顶部按钮）
注意点：
（i）固定定位是以浏览器的可视窗口为参照来偏移的（因此与父元素没有任何关系）；
（ii）固定定位不再占有原先的位置（和绝对定位一样神在形灭，可以把固定定位视作特殊的绝对定位）。
（iii）固定定位不是只能固定在可视窗口的右下角，在一些网页中的返回顶部按钮是这样（如csdn编辑文章的页面），但在一些页面，返回顶部的按钮也能固定在版心的右下侧，甚至更高级的页面还能实现根据缩放大小的不同分别固定在版心右下侧和可视窗口右下角（如bilibili网页版的返回顶部按钮）
而固定在版心的右下侧需要引入一个小算法：
body的width的50%+版心的width的50%；
body的width的50%可以直接写成50%，而版心width的50%要用margin-left：0.5*版心width
提问：
设返回顶部这个按钮名为box，版心名为w，问能不能把box放在w里面，然后令box的left：-20px（返回顶部按钮的宽度），bottom：0；从而使得box出现在版心的右下侧呢？
答：不能。因为fixed始终是以可视窗口为参照的，因此设置left和bottom时都是以可视窗口为标准，left：-20px会使box始终位于可视窗口之外，因此永远看不见他了。
1.3.6粘性定位sticky
粘性定位可以认为是相对定位和固定定位的混合，应用场景：用于设置本来不随着页面滚动的导航栏（相对定位），在用户向下滚动页面到某一位置时，变成跟随页面滚动的导航栏（固定定位）。
特点：
（i）以浏览器的可视窗口为参照移动元素（固定定位特点）；
（ii）粘性定位占有原先的位置（相对定位特点）；
（iii）必须添加top、left、right、bottom其中一个才有效。
top、left、right、bottom的作用：e.g.令top：0；意即当box离可视窗口上沿距离为0时才转成固定定位跟随窗口移动，若不加则不会转成固定定位。
1.3.7定位类型总结
（图源同上）
1.3.8定位叠放次序
在使用定位布局的时候可能会出现盒子重叠的情况，此时可以使用z-index来控制盒子的前后次序。语法规范：
选择器 {z-index: 1 ;}，数值可以是任何整数，数值越大盒子就在越上层。
如果属性值相同，则按照书写的顺序，后来居上。
z-index只出现在定位中，而且数值之后没有单位。
1.3.9绝对定位（及固定定位）实现盒子居中
注意：加了绝对定位的盒子无法通过margin：auto来实现水平居中（但是相对定位则可以，因为i相对定位没有脱标，而绝对定位脱标），但可以通过以下算法实现水平和垂直居中。
算法（水平居中）：
left：body的width的50%；margin-left：- 该盒子本身width的50%；
垂直居中：
top：body的width的50%；margin-top：- 该盒子本身height的50%；
1.3.10浮动与绝对/固定定位的相似点
绝对定位和固定定位在某些方面与浮动类似（或者说与行内块元素类似）：
（i）行内元素添加绝对或固定定位，可以直接设置高度和宽度（行内块元素）；
（ii）块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小（行内块元素）；
（iii）脱标（注意：脱标盒子不会触发外边距塌陷；相对定位不脱标，绝对定位脱标）。浮动是半脱标，绝对定位是全脱标
1.3.11浮动与绝对/固定定位的区别
绝对/固定定位会完全压住盒子，而浮动元素只会压住他下面标准流的盒子，不会压住标准流盒子里面的文字和图片（因为浮动本来的目的就是用于制造文字环绕效果）。如下图：
但绝对定位会压住他下面的盒子里的所有内容。如图：
（图源同上）
420
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
