10：定位

 

定位总结

  

关于定位

1 标准流在最底层 ( 海底 )
2 浮动的盒子在中间层 （ 海面 ）
3 定位的盒子在最上层 ( 天空 )

  

前置知识

1）为什么要使用定位

将盒子定在某一个位置，自由的漂浮在其他盒子上面

2）基本语法

定位 = 定位模式 + 边偏移

3）边偏移 [ 方位名词 ]

top: 30px;   bottom: 30px;   left: 30px;   right: 30px; 
 顶端偏移      底部偏移量        左侧偏移量      右侧偏移量

4）定位模式

static　　relative　　absolute　　fixed 
静态定位   相对定位     绝对定位    固定定位

 

一 静态定位 [ 只做了解 ]

1 默认的定位方式，是无定位的意思。
2 按照标准流摆放位置，没有边偏移
3 几乎不用 只做了解

 

二 相对定位 relative [ 重要 ]

1）定位方式

基于元素原来在标准流中的位置移动

2）特性

没有脱标，元素原来的位置仍然保留

   

三 绝对定位 absolute [ 重要 ]

1）定位方式

1 基于最近的已经定位的父元素进行定位
2 绝对定位要和父级盒子搭配使用
3 定位口诀：子绝父相  子元素用绝对定位  父元素用相对定位
已经定位包括：( 绝对|固定|相对 )   父元素：（ 包括祖先 ）

2）特性

1 如果父元素没有定位，会一直往上找，一直找到document为止 [ 浏览器左上角为基点 ]
2 如果父元素有定位，则以父元素为基准定位
3 定位后的元素，完全脱标,原来的的位置会被标准流的盒子占用

 

 四 固定定位 fixed [ 重要 ]

1）定位方式

基于浏览器可视窗口定位

2）特性

1 完全脱标 不占位置
2 和父元素没有任何关系
3 不随滚动条滚动

 五 定位的扩展

1）绝对定位的盒子居中

1 绝对定位的盒子不能通过 margin: auto; 设置水平居中
计算公式：
. 让盒子的左侧移动到父级元素水平中心的位置 left: 50%;
. 让盒子向左移动自身宽度的一半  margin-left: -100px;

  原理图

2）堆叠顺序 z-index    z轴 [ 纵深轴 ] 

多个定位盒子是叠罗汉一样重叠在一起的。后来居上，后面的在最上面

1 属性值：整数、负整数。 默认值是0

2 如果属性值相同,则按照书写顺序，后来居上

3 数字后面不能加单位

4 z-index 只存在于定位中，其他标准流浮动无效

 3）定位改变了display属性

改变显示模式的方法

1 用 display: inline-block;

2 用浮动 float 默认转为行内块

3 绝对定位 固定定位也和浮动类似，默认转为行内块

所有说，一个行内盒子，如果加了浮动 固定定位和决对定位，不用再转换，直接给宽高就可以

4 浮动元素 绝对定位元素都不会触发外边距合并问题