## 1.固定定位 - 将元素固定在页面某个位置 ~~~ postion:fixed; top: left: right: bottom: ~~~ ## 2.相对定位 相对定位(position:relative)：让元素相对于自己原来的位置，进行位置调整。 ps:相对定位的元素最好不要使用right，bottom。只用left和top; ~~~ position: relative; left: 50px;/*横坐标：正值表示向右偏移，负值表示向左偏移*/ top: 50px; /*纵坐标：正值表示向下偏移，负值表示向上偏移*/ ~~~ <b>相对定位不脱标</b> **相对定位**：不脱标，老家留坑，**别人不会把它的位置挤走**。 也就是说，相对定位的真实位置还在老家，只不过影子出去了，可以到处飘。 ### 相对定位的用途 * （1）微调元素 * （2）做绝对定位的参考，子绝父相 ## 3.绝对定位 绝对定位（position:absolute）:定义横纵坐标。原点在父容器的左上角或左下角。横坐标用left表示，纵坐标用top或者bottom表示。**纵坐标若是top原点就在页面的左上角；若是bottom原点就在页面的左下角。** ### 绝对定位脱标 **绝对定位的盒子脱离了标准文档流。** 所以，所有的标准文档流的性质，绝对定位之后都不遵守了。 绝对定位之后，标签就不区分所谓的行内元素、块级元素了，不需要`display:block`就可以设置宽和高了。 ### 以盒子为参考点 一个绝对定位的元素，如果父辈元素中也出现了已定位（无论是绝对定位、相对定位，还是固定定位）的元素，那么将以父辈这个元素，为参考点。 **工程应用：** “**子绝父相**”有意义：这样可以保证父亲没有脱标，儿子脱标在父亲的范围里面移动。于是，工程上经常这样做： > 父亲浮动，设置相对定位（零偏移），然后让儿子绝对定位一定的距离。