诺禾致源|诺禾：css基础定位布局

css基础篇14–定位布局

目标

理解文档流
四种定位布局

在我们日常生活工作中，离不开写字，上学考试时，作文是要从左往右，自上而下的书写；工作word文档，系统更是默认从左往右，自上而下的版式编写内容。
css基础篇14–定位布局

小学生作文都知道要从左往右，自上而下
文档流

所谓的文档流，指的是在网页里，元素排版布局过程中，元素会自动从左往右，自上向下的排列方式。

当浏览器渲染html文档时，从顶部开始开始渲染，为元素分配所需要的空间，每一个块级元素单独占一行，行内元素则按照顺序被水平渲染直到在当前行遇到了边界，然后换到下一行的起点继续渲染。
css基础篇14–定位布局

渲染效果
脱离文档流

如果想制作一个好看的网站，按照这种正常的文档流布局，只能得到一个规规矩矩的网站。

所谓脱离文档流，即将元素从普通的布局排版（普通文档流）中脱离出来，不在限制于当前的布局束缚，想在哪显示就在哪显示。

后面的元素就会上来填补他的位置，这就跟排队的时候，前面的人突然走了，自然就会占他的位置。

要想脱离文档流，可以用定位布局。
静态定位

如果没有指定元素的position属性值，也就是默认情况下，元素是静态定位。任何方向属性都不会起作用。

语法：position:static:
相对定位

采用相对定位的元素，其位置是相对于它的原始位置计算而来的。相对定位是通过将元素从原来的位置向上、向下、向左或者向右移动来定位的。采用相对定位的元素会获得相应的空间。

语法：position:relative:

四个方向属性控制：上-top、下-bottom、左-left、右-right
css基础篇14–定位布局

元素还会占着原来的位置

采用这种相对定位，并不会脱离文档流，视觉上他只是移动了位置，并不会影响到其他元素。换另一种解释，等于你放了个水杯占在座位上，人只是暂时离开，这个位置还是你的。
css基础篇14–定位布局

元神出窍，本体还占着原来的位置
绝对定位

绝对定位在几种定位方法中使用最广泛，这种方法能够很精确地把元素移动到任意你想要的位置。

一个元素变成了绝对定位元素，这个元素就完全脱离正常文档流了，绝对定位元素后面的元素会认为这个元素并不存在，后面的元素就直接占了上来。

语法：position:absolute:
css基础篇14–定位布局

脱离了文档流，后面的元素直接占了上来

默认情况下，CSS绝对定位元素的位置是相对于浏览器而言，而CSS相对定位元素的位置是相对原始位置而言
固定定位

固定定位是最直观而最容易理解的定位方式，当元素的position属性设置为fixed时，这个元素就被固定了。

被固定的元素不会随着滚动条的拖动而改变位置。在视野中，固定定位的元素的位置是不会改变的。

语法：position:fixed:
css基础篇14–定位布局

永远固定
总结

定位布局的出现，使得用户精准定位页面中的任意元素成为可能，使得网页布局变得更加随心所欲。

联合使用定位和浮动，能够创建多种高级而精确地布局。
css基础篇14–定位布局

总结