目录

定位 position

语法： position：static | relative | absolute | fixed | center | page | sticky 默认值：static

取值：

static： 对象遵循常规流。此时4个定位偏移属性不会被应用。

relative： 对象遵循常规流，并且参照自身在常规流中的位置通过top，right，bottom，left这4个定位偏移属性进行偏移时不会影响常规流中的任何元素。

absolute： 对象脱离常规流，此时偏移属性参照的是离自身最近的定位祖先元素，如果没有定位的祖先元素，则一直回溯到body元素。盒子的偏移位置不影响常规流中的任何元素，其margin不与其他任何margin折叠。

fixed： 与absolute一致，但偏移定位是以窗口为参考。当出现滚动条时，对象不会随着滚动。

就是默认的定位规则

Position: relative;

偏移量： top left right bottom 成对出现，垂直方向跟水平方向各一个

Position: absolute;

绝对定位的特点： 1，脱离标准流，不占标准流的位置 2，可以改变元素的显示方式 3，如果只设置定位方式，没有设置偏移量，元素的位置不会改变 4，如果有包含关系 子元素绝对定位，父辈元素时是静态定位，那么这个子元素参照浏览器做位置变化 但是如果这个父元素是非静态定位，那么这个子元素参照的是非静态定位的父辈位置来做位置改变 如果父辈元素中有多个非静态定位，那么这个子元素参照离他最近的父辈元素做位置变换

在有嵌套关系时，如果要改变子元素相对于父元素的位置，则在子元素样式加上绝对定位position：absolute；在父元素样式加上相对定位position：relative；因为如果都设置绝对定位，那么父元素就脱离了标准流，反而影响了整体布局。

要使子盒子在父盒子中无论页面比例如何进行居中

方法： 设置50%的偏移量，然后让居中的盒子往相反的方向移动自身的一半

初始：子盒子在父盒子中默认位置

步骤一：

效果：

原因：没算上子盒子本身的宽高

步骤二：算上子盒子宽高的一半：

效果：

Position：fixed；

固定定位的特点：认死理型 1.脱离标准流，不占原来位置 2.固定定位的元素不设置宽度，不会继承父类的宽度 3.如果这个元素做的固定定位，不管父辈元素是什么定位 这个固定定位的元素都是以浏览器作为参考标准来做位置改变的

常用语侧边栏

语法： z-index: auto | < integer > 默认值：auto 适用于：定位元素。即定义了position为非static的元素 取值： auto：元素在当前层叠上下文中的层叠级别是0。元素不会创建新的局部层叠上下文，除非它是根元素。 < integer >： 用整数值来定义堆叠级别。可以为负值。

display: none;设置元素隐藏后，原来的位置也不再占用

visibility:hidden;隐藏元素以后依然占据原来的位置