定位

定位

概述

定位也称为摆盒子，定位可以让盒子自由的在某个盒子内部移动位置或者固定屏幕中的某个位置，并且可以压住其他盒子；一个完整的定位需要有定位模式和边偏移

边偏移:决定了该元素的最终位置

边偏移属性	示列	描述
top	top:80px	顶端偏移量，定义元素相对于其父元素上边线的距离
bottom	bottom:80px	底部偏移量，定义元素相对于其父元素下边线的距离
left	left:80px	左侧偏移量，定义元素相对于其父元素左边线的距离
right	right:80px	右侧偏移量，定义元素相对于其父元素右边线的距离

定位模式：决定元素的定位方式，通过css的属性来设置，其值可以分为：

a.静态定位（了解）

​ 静态定位是元素的默认定位方式，无定位的意思

​

 选择器 { position:static ;}

b.固定定位（重要）

​ 固定定位是元素固定于浏览器可视区的位置。

​ 应用场景：可以在浏览器页面滚动时元素的位置不会改变

​

选择器 {position : fixed ;}

​ 特点：

​ i. 以浏览器的可视窗口为参照点移动元素：和父元素没有任何关系；不随滚动条滚动

​ ii. 固定定位不在占有原先的位置：即固定定位也是一种特殊的绝对定位

​ 固定在版心的右侧位置（算法）：

​ 算法： 先让盒子固定定位在（浏览器可视区）left50%；在让固定的定位盒子在版心宽 度的margin-left50%

c.相对定位（重要）

​ 相对定位是元素在移动位置的时候，是相对于它原来的位置来说的

​

选择器 { position : relative;}

​ 特点：相对于原来的位置移动的；原来在标准流的位置继续占有，后面的盒子仍然 以标准流的方式对待它（即不脱标，继续保持原来的位置）

d.绝对定位（重要）

​ 绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的

​

选择器 { position : absolute;}

​ 特点：如果没有（父）祖先元素或者（父）祖先元素没有定位，则以浏览器为准定位；如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考位置；绝对定位不在占有原先的位置（脱标）

最重要的是： 自绝父相：子级使用绝对定位，父级则需要相对定位

注意：有绝对定位的盒子不能通过margin： auto 来设置水平居中，但是可以通过先让盒子移动 的父级元素（版心）的水平中心位置left : 50 % , 在让盒子向左移动自身宽度的一半 margin-left：x px ;

e.粘性定位（了解）

选择器 { position : sticky ; top : 10px ;}

特点：以浏览器的可视窗口为参照点移动元素（固定定位的特点）

​ 粘性定位占有原先的位置（相对定a…位特点）

​ 必须添加top 、left 、right、bottom其中的一个才有效

定位的特殊性

a. 行内元素添加绝对或者固定定位，可以直接设置宽度和高度

b. 块内元素添加绝对或固定定位后，如果不给大小，默认大小为内容的大小

c. 浮动元素、绝对定位（固定定位）元素都不会触发外边距合并的问题

d. 浮动的元素只会压住下面标准流的盒子，不会压住标准盒子里面的内容，但是绝对定位会压住下面标准流所有的内容

定位的应用：

（1）比如说淘宝中国定的搜索栏

（2）让盒子自由的在某个盒子内部移动位置