学习心得 --- 定位(position) 篇

边偏移

定位模式(定位的分类)

相对定位relative(自恋型)

注意：

1. 相对定位最重要的一点是，它可以通过边偏移移动位置，但是原来的所占的位置，继续占有。
2. 其次，每次移动的位置，是以自己的左上角为基点移动（相对于自己来移动位置）

就是说，相对定位的盒子仍在标准流中，它后面的盒子仍以标准流方式对待它。（相对定位不脱标）

如果说浮动的主要目的是 让多个块级元素一行显示，那么定位的主要价值就是 移动位置， 让盒子到我们想要的位置上去

绝对定位absolute (拼爹型)

绝对定位的盒子水平/垂直居中

普通的盒子是左右margin 改为 auto 但是对于绝对定位就无效了

定位的盒子也可以水平或者垂直居中，有一个算法：

1. 首先 left 50% 父盒子的一半大小
2. 然后走自己外边距负的一半值就行了 margin-left

注意：

1. 绝对定位最重要的一点是，它可以通过边偏移移动位置，但是它完全脱标，完全不占位置。

固定定位fixed（认死理型）

注意

1. 固定定位的元素跟父亲没有任何关系，只认浏览器。
2. 固定定位完全脱标，不占有位置，不随着滚动条滚动。

叠放次序（z-index）

注意：

1. z-index的默认属性值为0，取值越大，定位元素在层叠元素越居上。
2. 如果书写相同，则根据书写顺序，后来者居上
3. 后面的数字一定不能加单位。
4. 只有相对定位，绝对定位，固定定位有此属性，其余标准流，浮动，静态定位都无此属性，亦不可指定此属性。

定位总结

定位模式转换

display 显示

1. display设置或检索对象是否及如何显示。
2. display : none隐藏对象与它相反的是display:block除了转换为块级元素之外，同时还有远素的意思。
3. 特点:隐藏之后，不再保留位置。

visibility 可见性

1. 设置或检索是否显示对象。
2. visible:对象可视
3. hidden:对象隐藏
4. 特点: 隐藏之后，继续保留原有位置。(停职留薪)

overflow 溢出

检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。

1. visible: 不剪切内容也不添加滚动条。
2. auto : 超出自动显示滚动条，不超出不显示滚动条
3. hidden: 不显示超过对象尺寸的内容， 超出的部分隐藏掉
4. scroll: 不管超出内容否， 总是示滚动条