今天心情还不错啦,就随便写一下哈,
借这次技术贴的机会，对自己学习的定位position知识做个回顾。
a、为什么使用定位？
打个比方，有一下2种场景：某个元素可以自由的在一个盒子内移动位置，并且压住其他盒子和当我们滚动窗口的时候，盒子是固定屏幕某个位置的，
总结一下就是：
1.标准关注垂直排列，浮动则让多个块级盒子一行没有缝隙排列显示，用于水平排列
2.而这时候需要定位来让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子。
b、定位的组成：定位 = 定位模式 + 边偏移
边偏移：则决定了该元素的最终位置。
边偏移是定位的盒子移动到最终位置。有 top、bottom、left 和 right4个属性。
注意：定位的盒子有了边偏移才有价值。 一般情况下，凡是有定位地方必定有边偏移。
边偏移属性
示例
描述
top
top: 80px
顶端偏移量，定义元素相对于其父元素上边线的距离。
bottom
bottom: 80px
底部偏移量，定义元素相对于其父元素下边线的距离。
left
left: 80px
左侧偏移量，定义元素相对于其父元素左边线的距离。
right
right: 80px
右侧偏移量，定义元素相对于其父元素右边线的距离
定位模式：用于指定一个元素在文档中的定位方式。
position 属性定义元素的定位模式，语法：选择器 { position: 属性值; }定位模式决定元素的定位方式 ，它通过 position 属性来设置，其值可以分为四个：静态定位static，相对定位relative，绝对定位absolute，固定定位fixed，其中相对定位和绝对定位是我们最为常用的定位。
相对定位的特点：
1. 相对定位是元素在移动位置的时候，是相对于它自己原来的位置来说的
2. 原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它。
因此，相对定位并没有脱标。它最典型的应用是给绝对定位当父盒子的。
绝对定位的特点：
1. 绝对定位不再占有原先的位置。所以绝对定位是脱离标准流的。（脱标）；
2.（祖先）父元素没有定位，如果没有祖先元素或者祖先元素没有定位，则以浏览器为基准定位（Document 文档）。
3.（祖先）父元素有定位，元素将依据最近的已经定位（绝对、固定或相对定位）的父元素（祖先）进行定位。
绝对定位和相对定位的使用场景：子绝父相。
特点：
①子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子。
②父盒子需要加定位限制子盒子在父盒子内显示。
③父盒子布局时，需要占有位置，因此父亲只能是相对定位。
这就是子绝父相的由来，所以相对定位经常用来作为绝对定位的父级 |
|
收藏
淘帖
踩
