css定位详细讲解

定位

css布局的三种机制
普通流（标准流） 在最底层
浮动（让盒子从普通流中浮起来，让多个盒子水平排列成一行） 在中间层
定位（将盒子定在某一个位置） 在最上层
定位详解
定位是用来布局，由两部分组成
定位=定位模式+边偏移
边偏移

定位模式
语法：position:属性值;

静态定位
静态定位是元素的默认定位方式，无定位的意思。它相当于border里面的none，不要定位的时
候用。
静态定位按照标准流特性摆放位置，它没有边偏移。
静态定位在布局时我们几乎不用的
相对定位
相对定位是元素相对于它原来在标准流中的位置来说的。
相对定位的特点:
●相对于自己原来在标准流中位置来移动的
●原来在标准流的区域继续占有，后面的盒子仍然以标准流的方式对待它。
绝对定位
绝对定位是元素以带有定位的父级元素来移动位置
1.完全脱标–完全不占位置
2.父元素没有定位，则以浏览器为准定位
3.父元素要有定位
将元素依据最近的已经定位(绝对、固定或相对定位)的父元素(祖先)进行定位。
绝对定位的特点:
●绝对是以带有定位的父级元素来移动位置 (拼爹型) 如果父级都没有定位，则以浏览器文档为准移动位置
●不保留原来的位置，完全是脱标的。
定位口诀–子绝父相
子绝父相—子级是绝对定位，父级用相对定位
为什么在布局时，子级元素使用绝对定位时,父级元素就要用相对定位呢?
由于子元素，不占据位置，所以我们使用绝对定位
由于父元素占据位置，不能响应后面元素的正常显示，我们使用相对定位
固定定位
固定定位是绝对定位的一种特殊形式: 如果说绝对定位是一个矩形那么固定定位就类
似于正方形
1.完全脱标一完全不占位置;
2.只认浏览器的可视窗口–I浏览器可视窗口 +边偏移属性来设置元素的位置;
跟父元素没有任何关系;单独使用的
不随滚动条滚动。
绝对定位的盒子居中

1. left: 50%; :让盒子的左侧移动到父级元素的水平中心位置;
2. margin-left: -100px;: 让盒子向左移动自身宽度的- -半。
   堆叠顺序
   加了定位的盒子，默认后来者居上，后面的盒子会压住前面的盒子
   用z-index层叠等级属性可以调整盒子的堆叠顺序。
   z-index的特性如下:
   1.属性值:正整数、负整数或0,默认值是0,数值越大，舒越靠上;
   2.如果属性值相同，则按照书写顺序,后来居上;
   3.数字后面不能加单位。
   注意: z-index 只能应用于相对定位、绝对定位和固定定位的元素，其他标准流、浮动和静态定位无效。
   定位改变display属性
   前面我们讲过，display 是显示模式，可以改变 显示模式有以下方式:
   ●可以用inline-block转换为行内块
   ●可以用浮动float默认转换为行内块(类似， 并不完全一 样,因为浮动是脱标的)
   ●绝对定位和固定定位也和浮动类似，默认转换的特性转换为行内块。
   所以说，一个行内的盒子，如果加了浮动、固定定位和绝对定位，不用转换，就可以给这个盒子直接设置宽度和高度等。
   同时注意:
   浮动元素、绝对定位(固定定位)元素的都不会触发外边距合并的问题。(我们以前是 用padding
   border overflow解决的)
   也就是说，我们给盒子改为了浮动或者定位,就不会有垂直外边距合并的问题了。
   定位小结
   
   注意:
   1.边偏移需要和定位模式联合使用，单独使用无效;
   2.top和bottom不要同时使用;
   3.left和right不要同时使用。