position定位笔记

position定位

position一共有四个可选属性：static/relative/absolute/fixed

代码：

代码结果：

1. 棕色(brown)的是static的，所以它的left和top没有起作用，一直跑到最上面去了
2. 黑色（black）的是fixed的，所以它直接以浏览器窗口开始计算left和top的值
3. 红色(red)和蓝色(blue)分别是absolute和relative他们都是从父对象开始计算left和top的值，只是因为有一个是absolute所以产生了重叠效果，没有被另外一个挤走。
4. 因为默认的类型都是static，所以页面长度等定位的不合理时一个会把一个挤走。

static

position:static

position的默认值，一般不设置position属性时，会按照正常的文档流进行排列

relative

position:relative

1. 微调元素，相对于自己原来的位置移动
2. 不脱标，形影分离，身体留在原本位置（本体看不见但还是占有位置），影子移动
3. relative会导致自身位置的相对变化，而不会影响其他元素的位置、大小的变化。
4. relative产生一个新的定位上下文

absolute

position:absolute

1. absolute元素脱离了文档结构。只要元素会脱离文档结构，它就会产生破坏性，导致父元素坍塌。（此时你应该能立刻想起来，float元素也会脱离文档结构）
2. absolute元素具有“包裹性”。宽度刚好是内容的宽度。
3. absolute元素具有“跟随性”。虽然absolute元素脱离了文档结构，但是它的位置并没有发生变化，还是老老实实的呆在它原本的位置，因为我们此时没有设置top、left的值。
4. absolute元素会悬浮在页面上方，会遮挡住下方的页面内容。

fixed

position:fixed

固定定位就是相对浏览器窗口定位。页面无论如何滚动，这个盒子显示位置不变。