开发者学堂课程【零基础学前端 HTML+CSS：图层的定位】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/398/detail/5145
图层的定位
内容介绍
一、CSS 定位
二、CSS 定位机制
三、CSS position 属性
盒子模型的定位，就是 Positioning 的定位，之前学习过盒子的浮动，光有浮动还不够，因为经常要调整 div 的位置，一些细节的位置，不能总是靠 margin 这种去调整，肯定得调它的偏移量，margin 是它的一个外边框，就是一个边距，并不是一个位置，所以现在出现了一个专门调整它的位置。
一、CSS 定位
1、CSS 定位（ Positioning）属性允许对元素进行定位。
2、为定位和浮动提供了一些属性，利用这些属性，可以建立列示布局，将布局的一部分与另一部分重叠，还可以完成多年来通常需要使用多个表格才能完成的任务。定位更多是基于嵌套的定位，一个大的 div，里面嵌套一个小的 div，想让它居左的时候有一定的距离，居右时有一定的距离，这是调整的意义所在。
二、CSS 定位机制
1、CSS 有三种基本的定位机制：普通流、浮动和绝对定位。
2、除非专门指定，否则所有框都在普通流中定位。普通刘中的元素的位置由元素在（ X ）HTML 中的位置决定。
3、浮动流就是它本身已经浮动起来了，在浮动的基础上，再对元素进行定位。
4、块级框从上到下一个接一个排列，框之间的垂直距离是由框的垂直外边距计算出来。
三、CSS position 属性
1、通过使用 position 属性，可以选择4种不同类型的定位，这会影响元素框生成的方式。
（1）新建一个 position 的定位，普通流就是它还没有浮动起来，浮动起来就是浮动流，引入 float.html 里面的代码。
<div id=" f1" >浮动1</div>
<div id=" f2" >浮动2</div>
<div id=" f3" >浮动3</div>
在这个代码之上进行一些修改。先运行一下浮动的代码，三个框。
（2）首先改变一下，都让它居左边，浮动起来以后，希望红色上面和下面产生一些距离，可以用定位把位置做出改变。
2、position 属性值的含义：
（1）static 元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个杭匡，置于父元素中。
（2）relative 元素框偏移某个距离。元素仍保持其未定位的形状，它原本所占的空间仍保留。
（4）在这里面它有相对定位和绝对定位，默认值是 static ，相当于原本的一个位置，所以不用单独写它，本身就是一个默认值，所以现在可以写一个 relative ，偏移某个距离，元素仍保持其未定位的形状，并不是给它删掉，在代码里面增加一个 position 相对定位，再单独增加上下左右四个属性，执行就可以看到这个元素改变浮动的位置，但是并没有影响右边的浮动属性，左边产生一个距离，上边也产生一个距离，下边和右边也是有的。位置都保留起来了，因为他们之间不是一个图层，所以互不影响，这是一个相对调整的位置，相对于浏览器。
f3 里面可以包含一个 f4 的属性。
<div id="f3">
<div id=" f4">绝对定位</div>
让 f3 也浮动起来，让它浮动到左边，
Float：left；
f4 调小一点，50 像素乘 50 像素，加一个背景颜色。绝对定位 f4 其实是被嵌套在f3 里面的，为了清楚一些，可以在 f3 打上一点文字。
<div id=" f1 >浮动1</div>
<div id=" f2">浮动2</div>
<div id="f3">
F3333333333333333
<div id=" f4">绝对定位F4</div>
复制到 f4。
#f4 {
width: 50px;
height: 50px;
background-color: #c0c0c0 :
position: relative;
top: 100px ;
bot tom: 100px ;
left: 100px;
right:100px;}
可以看到它是相对于 f3。
（5）absolute 元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
绝对定位的属性。
当属性值改成 absolute，运行可以发现绝对定位的值，跑到了页面的外面，如果单独写 position：absolute；absolute 属性，那么它的值参考它的 body，最外框的属性，body 就是浏览器的框，所以它是参考浏览器的框居左或居上，变成一个绝对值。
如果想让它变成一个相对的值，需要在f3的负级的面板里增加一个 position： relative，所以再刷新的时候，相对于这个位置做了一个绝对的定位。
增加了一个 top：100px；可以看到它的位置还在这。
（6）fixed 元素框的表现类似于将 position 设置为 absolute ，不过其包含块是视窗本身。
比如这个页面内容有点多，增加很多个 br 标签， 可以发现浮动 2 元素一直是不动的，当滚动条向下滚动的时候，内容一直在这个位置，这个可以经常在网站上面看到，网站上有一些菜单，就浮动在这个位置上面，或者上面有一个广告，或者右下角的广告，一直是浮动在这个位置，不管怎么拉菜单，位置都不发生改变，那个就是设置 fixed。
在 f2 设置
#f2{
width: 200px ;
height: 200px;
background-color : green ;
float: left;
position: fixed;
top: 0px ;
left: 500px;
}
可以看到它是一个绝对的位置，当浏览器进行滚动的时候，浮动 2 的面板，永远都在这个位置上不动，针对于浏览器它是一个绝对的值。
这就是四种浮动的状态。
