前端学习-CSS定位

一、为什么需要定位

• 可以让盒子自由的在某个盒子内移动位置
• 固定屏幕中某个位置，并且可以压住其他盒子

二、定位组成

1、定位模式

决定元素的定位方式，通过CSS的position属性来设置。
属性值：

1）静态定位static（了解）

• 默认定位方式，就是无定位的意思啦！
• 按照标准流特性摆放位置，没有边偏移

2）相对定位relative（重要哦！）

• 在元素移动位置的时候，相对于它原来位置来说
• 原来在标准流地位置继续占用（不脱标，继续保持原来位置）

3）绝对定位absolute（重要哦！）

• 在元素移动位置时，是相对于它祖先元素来说的
• 如果没有祖先元素或祖先元素没有定位，则以浏览器为准定位
• 如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位的祖先元素为参考点移动位置
• 绝对定位不再占有原先的位置

记得-----子绝父相~超级重要

• 子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子
• 父盒子需要加定位限制盒子在父盒子内显示
• 父盒子布局时，需要占有位置，因此父亲只能是相对定位
• 总结：因为父级需要占有位置，因此是相对位置；子盒子不需要占有位置，则是绝对位置；

4）固定定位fixed（重要）

• 以浏览器的可视窗口以参照点移动元素
• 跟父元素没有任何元素
• 不随滚动条滚动
• 固定定位不占有原来的位置

固定定位小技巧-固定在版心右侧位置

• 1-让固定定位到的盒子left50%,走到浏览器可视区(版心)的一半位置
• 2-让固定定位的盒子margin-left版心宽度的一半距离,多走版心宽度的一半位置

5）粘性定位sticky(了解)

• 以浏览器的可视窗口为参照点移动位置(固定定位特点)
• 粘性定位占有原先的位置(相对定位特点)
• 必须添加top,left,right,bottom其中一个才有效
• 兼容性较差,IE不支持

总结

2、边偏移

定位的盒子移动到最终位置，有top、bottom、left、right四个属性

3、定位叠放次序z-index

语法： 选择器{ z-index:1; }

• 数值可以是正整数、负整数或0，默认是auto，数值越大，盒子越靠上
• 如果属性值相同，则按照书写顺序，后来居上
• 数字后面不能加单位
• 只有定位的盒子才有z-index属性

三、定位的拓展

1、绝对定位的盒子居中

加了绝对定位的盒子不能通过margin：0 auto水平居中，但是可以通过一下计算方法实现水平和垂直居中

• left：50%；：让盒子的左侧移动到父级元素的水平中心位置
• margin-left：盒子宽度的一半；：让盒子向左移动自身宽度的一半

2、定位特殊特性

绝对定位和固定定位也和浮动类似

• 行内元素添加绝对或者固定定位，可以直接设置高度和高度
• 块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小

3、脱标的盒子不会触发外边距塌陷

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

4、绝对定位（固定定位）会完全压住盒子

• 浮动元素不同，只会压住它下面标准流的盒子，但是不会压住下面标准流盒子里面的文字（图片）。因为浮动产生的目的是为了做文字环绕效果，文字会围绕浮动元素。
• 但是绝对定位（固定定位）会压住下面标准流所有的内容