CSS布局学习笔记之position

CSS知识点 之 position布局

前段时间被同学怂恿，参加了百度前端技术学院的一个小培训，第一个阶段下来学到不少东西。课程的第一个阶段主要是HTML5 和 CSS 基础知识的一个小培训，给出的一些小任务虽然写起来不困难，但在写的过程中还是学到不少东西，查漏补缺。前端知识太丰富，很容易忽略一些小细节，自己也是倚着这个心态去学的，虽然写过网站，也写过app，不过这一程下来，通过里面给出的一些高水平的知识点的讲解，还是感觉很受用，现在分享出给大家伙看看，写的不好求放过，我第一次写东西，算是总结，也是回顾。

其中有不少东西，来自原帖，我会在下面给出链接。

 

使用position布局方式，可以分成三种，相对定位（也即position:relative）、绝对定位（postion:absolute\fixed）、粘性定位(position:sticky)等等。

通常我们还会见到一个关键字 static，static 是元素默认使用的定位方式，也就是元素在文档中处于当前的布局位置，此时，top，left，right，bottom，以及z-index 属性不起作用。

这里有一小段代码可以演示一下：（浏览器里面查看比较直观，这个是atom直接预览，速度快，推荐这玩意写前端）

可以看看设置了left 和 top 前后的变化

设置之前

 

设置之后

 

可以看到没有发生任何变化！

 

相对定位:默认在原先的元素位置留下一个空白，元素相对的位置是元素原先默认的位置，说起来有点绕。

之间看下面的图，设置后结果看图，对比图1，很好理解了吧！

 

 

也就是，使用relative 定位方式，元素还是存在于文档流之中的，不会脱离文档，依旧会占据一个位置。

 

绝对定位：absolute 和 fixed；绝对定位方式被任务是，元素是脱离了文档流。这个可以理解为元素是固定死的，相同级别的元素之间不存在位置的影响。它只和父级元素之间存在瓜葛。

先看这张图

 

元素2设置了绝对定位absolute,此时使用left，top，等属性的时候，元素相对的不再是元素默认的位置（也就是图1中元素2的位置），而是相对于section（最近的定位祖先元素）的位置定位了。而且，元素2将元素1盖住了。

 

而fixed 方式的固定定位和absolute相似。不同的是，fixed 以后，元素固定的位置不再是相对于文档流中的父级元素，而是相对于浏览器窗口！

 

在CSS3中新增了如下几种定位方式

center：

与absolute一致，但偏移定位是以定位祖先元素的中心点为参考。盒子在其包含容器垂直水平居中。

page：

与absolute一致。元素在分页媒体或者区域块内，元素的包含块始终是初始包含块，否则取决于每个absolute模式。

sticky：

对象在常态时遵循常规流。它就像是relative和fixed的合体，当在屏幕中时按常规流排版，当卷动到屏幕外时则表现如fixed。该属性的表现是现实中你见到的吸附效果。这玩意慎用。

 

原文地址：https://developer.mozilla.org/zh-CN/docs/Web/CSS/position