position()

css中的定位是布局中常用的方法，可以使html元素从文档流中分离出来，重新定位。语法如下:

position:static | relative | absolute | fixed position有四个值，static(默认静态定位)、relative(相对定位)、absolute(绝对定位)和fixed(固定定位)，通常与left、top和z-index属性一起使用(static除外)。

left —— 定位元素相对于定位点的左距离top —— 定位元素相对于定位点的上距离z-index ——定位元素的层级，当有多个定位元素上，通过此属性调整元素的显示层级，值越大的显示在最上面。默认如果不设置z-index属性，则会按照其在文档流中的先后位置显示。static（静态定位）

静态定位很简单。默认情况下，html元素是静态定位的，这与正常情况下html元素在文档流中的布局相同。left、top和z-index属性无法承受任何静态定位的左右，如下图所示:

图1图1

图1中的模块1，虽然设置了position:static，但是性能和没有设置的一样，按照标准的文档流程排版。

relative（相对定位）

相对定位是html元素相对于其在标准文档流中的原始位置的定位。如果未设置top和left，则除了可以设置top、left和z-index属性外，与静态定位相同，如下图所示:

代码:

图2图2

显示效果:

图3图3

图3中的模块2使用了相对定位，它偏离了正常的文档流，相对于原始位置左边50px，上边30px，但它在文档流中的位置仍然存在，只是在视觉上偏离了原始位置。

相对元素宽度默认与块级元素相同，宽度为100%；

absolute（绝对定位）

绝对定位时，当父元素也是定位元素(包括相对定位、绝对定位和固定定位)时，相对于父元素的左上角定位；如果父元素未定位或静态定位，则它相对于浏览器窗口的左上角定位。下面的例子:

代码:

图4图4

显示效果:

图5图5

在图5中，模块3和模块2-1都被设置为绝对定位，模块3的父模块没有被定位，模块2-1的父模块是模块2(相对定位)。所以模块3相对于页面的左上角定位，模块2-1相对于模块2的左上角定位。

定位绝对不保留原来的位置，完全脱离文档流，宽度变得不是100%(类似于行内元素)。将它与定位的父元素一起使用通常是有意义的。

fixed（固定定位）

固定定位，通俗点说就是固定在屏幕上。和绝对定位一样，完全脱离文档流，不保留空之间的原始位置。唯一的区别是，无论其父元素的位置如何，它总是相对于浏览器窗口的左上角定位。下面的例子:

代码:

图6图6

显示效果:

图7图7

在图7中，模块4的设置是固定定位，其父级是模块2(相对定位)。可以看出，模块4和模块2-1(绝对定位)的区别在于，模块4不是相对于其父的。

看下面这个例子。当滚动滚动条时，模块4总是固定在该块上。

图8图8

关于z索引，请注意在上面的图8中，模块4显示在模块3的下面。下图中，模块3的z指数明显小于模块4。为什么显示在模块4的上方？

图9图9

原因是模块4是父模块(相对定位)，其z-index为100，与模块3相同。因为模块3在模块2后面，所以模块3显示在模块4上。如果模块2的z索引更改为101，如下图所示:

图10图10

模块4显示在模块3上，所以z-index的属性是同一级别的元素互相比较大小。

总结

在网页布局中，早期广泛使用定位。现在不建议过多使用定位。应该只在特殊情况下使用，比如返回顶部按钮的效果，或者左边的导航条和菜单栏，是固定定位的，不跟随页面滚动。

本文主要知识点:

位置

行为

在文档流中

静电

默认行为；元素按顺序叠放，互相认识。

是

亲戚

相对于它在流中的原始位置。

是

固定的；不变的

相对于浏览器窗口的定位

不在/死了

绝对的

相对于最近的非静态(固定、相对、绝对)元素的定位

不在/死了

感谢您的关注，欢迎指正和补充。

第1部分:前端浮动浮动简介