CSS定位总结

CSS的position主要有以下几个属性：static,relative,absolute,fixed,CSS3又增加了center | page | sticky，三个属性。对于css3大多数浏览器也都还不支持，也没怎么用到就不说了。至于position的了解，个人觉得首先应该先了解一下什么是块级元素，内联元素，以及内联块元素，然后再开始了解position属性在页面布局中的应用，以及影响。

三种元素类型的特点：

1. 块级元素：在页面中独占一行，可以设置元素的高度，宽度
2. 内联元素：不独占一行，多个内联元素可以在同一行中，直到这一行的的宽度无法继续容下内联元素位置。不能设置元素的宽度，高度。
3. 内联块：介于以上两者之间，在内联元素的特性上改变了可以设置元素的快读与高度。

Position属性：

1. Static：默认属性，按标准文档流布局，（标准文档流布局方式，从上到下，从左到右，结合元素的特性，块级元素？内联元素？等一行行的从上到下渐渐占位，每行之内又是从左到右逐渐占位）
2. Relative：设置该属性的元素，依旧占据着其原本在标准文档流中的位置，但可以通过top,left等属性进行位置的偏移,偏移的位置是相对于元素原本在标准文档流中所占的位置而言
3. Absolute:设置该属性的元素脱离了标准文档流，即在标准文档流中不占位，其位置是相对于其第一个设置了position属性的祖先而言（static这个默认属性除外，即设置为static属性也视为没有设置），同时需要注意的是，如果设置了absolute属性的元素，没有设置top，left等属性，此时的元素虽然脱离了文档流但是其位置却是在其父元素的左上角，而不是在设置了position属性的祖先元素的左上角，当时有top，left等属性的时候，变成了先对与第一个设置了position属性的祖先元素的的先对位置，可以自己稍微用html文档演示一下：以下有个截图

image.png

image.png

4. Fixed：Fixed属性跟absolute属性的性质基本是一样的，不同点再于fixed属性的位置是想对于window窗口而言的而不是相对于其设置了position属性的父元素而言。常见的用法是用来固定导航以及页脚。

当position转角遇到display、margin collapse、overflow、float这些特性时？

• 如果元素的display为none,那么元素不被渲染,position,float不起作用；
• 如果元素拥有position:absolute;或者position:fixed;属性那么元素将为绝对定位,float不起作用
• 如果元素float属性不是none,元素会脱离文档流,根据float属性值来显示.
• 有浮动,绝对定位,inline-block属性的元素,margin不会和垂直方向上的其他元素margin折叠.

附加：

• 设置了float的元素会表现出inline-block元素的特性

image.png

image.png

• 当float和position:absolute被同时设置时，后设置的会在更上层

FastStoneEditor1.png

FastStoneEditor1.png