CSS-盒子模型之定位

一：定位的定义

定位可以让盒子自由地在另一个盒子的内部移动位置或者固定在屏幕中的某个位置，并且可以压住其它盒子。

二：定位使用方式

定位=定位模式+边偏移

2.1：定位模式

1.静态定位static

2.相对定位relative

3.绝对定位absolu

4.固定定位fixed

2.2：边偏移

top属性

bottom属性

left属性

right属性

三：使用定位

3.1静态定位static

2.默认定位方式，无定位的意思，无实际含义

选择器{position：static；}

2.特点：按照标准流布局，无偏移

3.2相对定位relative（常用）

特点1：相对定位是指元素在移动位置的时候，相对于它原来的位置

选择器{position：relative；}

特点2：原来在标准流的位置继续占有，保留原来的位置（仍然是标准流，没有脱标）

3.3绝对定位absolute（常用）

特点1：如果没有祖先元素或者祖先元素没有定位，则以浏览器为原点

特点2：如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素为原点移动位置(上级元素没有定位上上级有定位的话以上上级元素为原点)

3.4绝对/相对定位总结

绝对定位和相对定位的使用场景：

（1）子绝父相：

子级使用绝对定位。父级需要使用相对定位

（分析：父级需要占用位置，因此是相对定位，子级脱标浮在上面不需要占位置所以是绝对定位）

3.5固定定位fixed

元素固定于浏览器中的某个位置，使用场景：浏览器页面滚动时位置不会改变

选择器{position：fixed；}

固定定位特点1;

以浏览器可视窗口为原点移动元素

固定定位特点2：

固定定位不占有原先位置

四：z-index属性

定义：一个元素在文档中的层叠顺序，用于确认元素在当前层叠上下文中的层叠级别

适用于：定位元素，即定义了position为非static元素

同为static元素的层叠顺序：后来者覆盖原则，即后面写的会覆盖在上面

非static定位元素的层叠顺序：一般z-index默认值为0，不设置的情况下遵循覆盖原则，想要让前面的元素覆盖在上面，只需要设置前面的z-index的值大于后面的值即可。

注：z-index定义在非static元素才有实际意义。

五：总结

1.标准流

可以让盒子上下（块级）去排列或者左右（行内）排列，垂直的块级盒子就用标准流布局

2.浮动

可以让多个块级元素一行显示或者左右对齐盒子，多个块级盒子水平显示就用浮动布局

3.定位

定位最大的优势就是有层叠的概念，可以让多个盒子前后叠压来显示，如果元素自由在某个盒子内移动就用定位布局