CSS定位

定位基础

定位就是将盒子定在某一位置，定位=定位模式+位偏移。

定位模式和位偏移都属于属性

• 定位模式用于指定一个元素在文档中的定位方式
• 边偏移就是决定该元素的最终位置。

定位模式由position属性设置，属性值分为四个

属性	属性值	语义
position	static	静态定位
	relative	相对定位
	absolute	绝对定位
	fixed	固定定位
	sticky	粘性定位

边偏移有四个属性 top left right bottom

属性	属性值示例	描述
top	top: 50px;	顶端偏移量，定义元素相对于其父元素上边线的距离
bottom	bottom: 50px;	下端偏移量，定义元素相对于其父元素下边线的距离
left	left: 50px;	左端偏移量，定义元素相对于其父元素左边线的距离
right	right: 50px	右端偏移量，定义元素相对于其父元素右边线的距离

选择器 {
    position: relative;
    top；0px；
    left: 0px;
}

「static定位」

static定位是元素的默认定位方式，无定位的意思，按照标准流的位置，平时很少用到这种

「relative定位」

相对定位

特点：

1. 元素在移动位置时，相对于它原来的位置来移动的，移动位置时以自身位置为参考点
2. 不会脱标，继续保留原来标准流的位置，后面盒子仍以标准流对待他
3. 子绝父相

「absolute定位」

绝对定位

特点：

1. 移动位置时相对它祖先元素来移动，如果没有祖先元素或者祖先元素没有添加定位，则以浏览器为准定位
2. 如果祖先元素有定位（相对绝对固定），则以最近一级有定位的祖先元素为参考点
3. 会脱标，不占有原来的位置
4. 子绝父相

「fixed定位」

固定定位，是固定在浏览器可视区的位置，浏览器滚动时元素位置不改变

特点：

1. 以浏览器可视窗口为参考点移动元素，与父元素无关，不随滚动条滚动
2. 也会脱标，不占有原来的位置，可以看作时特殊的绝对定位

「sticky定位」

粘性定位，被认为是相对定位和固定定位的混合

特点：

1. 以浏览器可视窗口为参照物（固定特点)
2. 不会脱标，占有原来的位置（相对特点）
3. 必须添加边偏移其中一个元素才有效
4. 跟页面滚动搭配使用，兼容性差

「子绝父相」

子元素用绝对定位，父元素用相对定位。可以让子元素固定在父元素里面显示，父元素占有位置

「CSS小算法」

固定定位固定在版心右侧位置，多走版心宽度一半位置就可让固定定位盒子贴着版心右侧对齐了

1. 让固定定位的盒子left:50%，走到版心一半的位置
2. 让固定定位的盒子margin:left;版心宽度一半的距离

定位拓展

「定位叠放次序」

多个盒子使用定位时，可能会出现重叠，可通过z-index属性来控制盒子前后次序（z轴）

选择器{
	z-index: 1;
}

1. 属性值可以是正整数，负整数，或0。默认是auto，数值越大越靠上
2. 若属性值相同按书写顺序，后来居上
3. 数字不加单位
4. 只有定位的盒子才有z-index 属性

「定位盒子垂直居中」

加了定位的盒子不能通过margin: 0 auto;水平居中，需要通过下面算法实现水平和垂直居中

1. left: 50%；让盒子左侧移动到父级元素的水平中心位置
2. margin-left: 100px; 让盒子向左移动自身宽度的一半
3. 垂直居中同理

定位特殊性

「绝对定位和固定定位和浮动类似」

1. 行内元素添加绝对或固定后，可以直接设置宽度和高度
2. 块级元素添加后，如不设置宽度和高度，默认为内容大小

「脱标盒子不会引发外边距塌陷」

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

「绝对固定定位会完全压住盒子」

1. 浮动元素会压住标准流和盒子，但不会压住标准流盒子里面的文字图片
2. 绝对和固定会压住盒子所有内容
3. 浮动之所以不会压住文字，是因为浮动最初目的就是做文字环绕效果