css之定位（position的自我理解）

序言

最近看朋友写的一个浮动样式，float在父元素绝对定位时无法清除浮动，所以就感觉自己对定位的理解有点浅了，所以重新了解一下。

一、定位

1.定位的作用：

它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。

2.定位机制

css有三种基本的定位机制：普通流、浮动和绝对定位。
除非专门指定，否则所有框都在普通流定位。普通流中的元素的位置由元素在HTML中的位置决定。
页面正常标准布局时，块级元素一行一行自上到下排列，垂直距离由框的垂直外边距决定。
行内元素与行内块元素在行内从左至右排列，可以使用水平内边距，边框和外边距调整他们之间的间距。但无法使用垂直的外内边距，边框调整高度，可以通过设置行高属性调整。

3.相对定位，绝对定位

接下来，最直接的就是用参数学习
position的第一个参数是：statiic,这是一个默认参数
position的第二个参数是：relative，元素框偏移某个距离，元素仍保持原来的形状，他原来占的空间仍在。可设置left,right,top,bottpm调整上下左右间距进行定位。
position的第三个参数是：absolute，元素从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者初始包含块。脱离文档流。

绝对定位的元素会显现对于最近的定位祖先元素，如果元素没有已定位的祖先元素，就像对于最初的包含块。
设置children的position:absolute后

没有定位祖先元素的定位

也可以通过z-index设置优先级，调整层叠顺序，一开始为children1和children设置absolute，children1在上，设置完z-index:9999

但是当设置了absolute，margin:0 auto就无效，margin的具体值可以使用
position的第二个参数是：fixed，元素框的表现类似于将position设置为absolute，不过其包含块是视窗本身，其元素就是视窗本身。同absolute一样margin：0 auto;无用，但可通过margin单独设置边距。

上图可以看到，同absolute一样会脱离标准流，当父元素不设宽高时，父元素将没有宽高
** 这里注意：**与浮动不同，浮动可以清除浮动，但定位不行

二、由定位引发的问题

1.当初出现fixed-float

当出现父-子定位浮动状况为fixed-float时

此时，因为浮动li大小为内容大小，此时li可以设置宽高，ul是被li撑起来的，此时li设置百分比不能撑起ul,此时可以通过对ul的margin属性设置百分比，然后设置li百分比宽度使其居中。

2.当父-子-子出现reative-absolute-float

这种情况和第一种类似，relative未脱离标准流可使用margin:0 auto居中，但是absolute和fixed只能通过设置宽度百分比和margin水平间距的配合来实现居中

和浮动一样，定位需要注意的也是是否脱离标准流。

以上是我对position的总结，希望对你们有帮助！！！