css定位

css定位

1.普通流定位，又叫文档流定位，没写定位就是默认这种定位。文档流定位就像我们写作文的文字排列顺序，每个字都会占有自己的空间，同一行内从左往右排，不同行从上往下排。文档流差不多这个意思，行内元素就是从左往右紧挨着排列，同一行内放满放不下了就到下一行，块级元素自己占一行，从上往下的一行一行排。

2.浮动定位
块级元素如果按文档流定位，就是一个块级元素占一行，从上往下一行一行排，但如果想要块级元素从左往右排在同一行怎么办，于是有了浮动定位。
写法：float:left/right/none;
浮动定位可以这样想，一张白纸放在桌面上，文档流定位的元素就是你把元素贴在白纸上，每个元素都占有自己的位置，网页的最终效果的你俯视看这样白纸的效果。浮动定位的元素就是这个元素不再贴在白纸上，而是脱离白纸，浮在白纸上面，因为元素不再是贴在白纸上，也就不再占有白纸的位置，这会导致下一个文档流元素（那些贴在白纸上的元素）上前补位，同样的，网页的最终效果的你俯视看这样白纸的效果。还有，浮动定位的元素是默认向左对齐。再看下图就明白了。

接下来相对定位、绝对定位、固定定位：
写法：position:relative/ absolute /fixed;
解锁的属性：
top：就是距离上面偏移多少，如果值是正数就是元素往下走，负数就是往上走，
即+ 往下 - 往上
right：+ 往左 -往右
bottom ：+ 往上 -往下
left：+往右 -往左
如果左右上下有冲突，就随左和上。

3.相对定位
相对定位是相对于元素原来位置产生位移。特点：不脱离文档流，也就是即使元素产生了位移，但他仍然占据原来的页面空间，后面元素也不会上前补位，如下图，紫色元素是{position:relative;top:50px;left:50px;}。绿色元素没有上前补位，证明相对定位不会脱离文档流。

4.绝对定位
绝对定位是相对于已定位的离自己最近的祖先级元素。首先什么是已定位，position:relative/ absolute /fixed;都是已定位的元素。什么是离自己最近的祖先级元素。

d1和d2都是d3的祖先级元素，d2比d2更靠近d3，所以d2是最靠近d3祖先级元素，如果d2定位了，则d3相对d2绝对定位，如果d2没有定位d1定位了，则d3相对d1绝对定位，以此类推，直到body元素即整个

5.固定定位
固定定位就是将元素固定在页面的某个位置，不会随着滚动条发生位移变化。