目录
简述:
1. 盒子定位后, 行内元素也具备了宽高属性。
2. 定位和浮动 ( float ) 不一样的是,浮动 ( float ) 只能压住后面标准流的盒子,但是不能压住图片和文字,而定位可以。
3. 当多个盒子出现在一个位置时,可以通过定位后的专有属性 z-index 设置他们的层级,数值最大的优先显示。
4. 盒子使用定位后, 默认情况下当前盒子的位置不会变,原来在哪显示就还在哪显示,只不过多了4个定位后的专有属性
( left、right、top、bottom ) 来控制盒子的位置,而使用这4个属性对盒子位置进行偏移时的参照点, 就取决与定位的方式。
静态定位(static)
默认就是静态定位, 属于标准流, left、right、top、bottom、z-index 全都无效。
固定定位(fixed)
浏览器分为多部份组成,比如 地址栏,菜单栏,收藏栏..., 通常情况下浏览器可视窗口指的是,
能真正显示HTML内容的那一部分。(使用 iframe 的时候特殊,每个iframe都是单独可视窗口)
特点:
1. 固定定位后的盒子不会随滚动条移动。
2. 固定定位会脱离标准流, 所以不占有原先位置, 即使未移动, 后面的元素也会占有它的位置,而固定定位盒子本身会再原位置浮起来。
3. 固定定位后的盒子在使用 ( left、right、top、bottom ) 进行位置偏移时的参照点, 是浏览器的可视窗口, (具体参照点为可视窗口的左上角)
效果:
动图中代码解读:
动图中总共分四部分
1. 初始状态: 3个盒子整齐排列
2. 添加固定定位后: 第一个盒子和当前盒子( 加了定位的盒子 )位置未发生变化, 但是第三个盒子不见了
3. 添加层级属性后: 让当前盒子置于最底层后,第三个盒子出现了,说明当前盒子添加固定定位后, 已经不占有原来文档流中的位置, 位置被第三个盒子占用了,之前看不见第三个盒子是因为, 当前盒子在原位置浮起来, 所以盖住了第三个盒子
4. 添加偏移属性后: 当前盒子参照浏览器可视窗口的位置向下方和右侧分别移动了200px。(这个案例中运行结果部分为可视窗口)
相对定位(relative)
特点:
1. 相对定位不脱离标准流, 即使它被移动了,原有的位置也会一直被占用。
2. 相对定位后的盒子在使用 ( left、right、top、bottom ) 进行位置偏移时的参照点, 就是它原有位置。(具体参照点为原来位置的左上角)
效果:
动图中代码解读:
动图中总共分三部分
1. 初始状态: 3个盒子整齐排列
2. 添加相对定位后: 当前盒子( 加了定位的盒子 )和另外2个盒子的位置都未发生变化
3. 添加偏移属性后: 当前盒子参照原来的位置向下方和右侧分别移动了200px。
绝对定位(absolute)
特点:
1. 绝对定位会脱离标准流, 所以不占有原先位置, 即使未移动, 后面的元素也会占有它的位置,而绝对定位盒子本身会在原位置浮起来。
2. 没有父级或父级无定位的情况,移动时的参照点以浏览器可视窗口左上角为准。
3. 父级有定位的情况,以父级盒子左上角为准,当有多个父级,以最近的一个有定位的父级为准。
4. 子绝父相:通常都会让父盒子先有定位, 然后让绝对定位的盒子, 以父盒子为参照点移动。如果没有特殊场景,父盒子最好使用相对定位, 这样既能给绝对定位的盒子参照点,又不会脱离标准流影响后面的盒子。
效果:
动图中代码解读:
1. 初始状态: 3个盒子整齐排列
2. 添加绝对定位后: 当前盒子( 加了定位的盒子 )位置未发生变化,但是浮了起来,不再占有原来位置,导致后面的盒子占有了它的位置, 但是因为当前盒子浮了起来, 所以后面盒子被盖住。
3. 添加偏移属性后: 父级无定位的盒子, 参照浏览器可视窗口左上角的位置移动, 有父级定位的盒子参照父级盒子左上角的位置移动。
粘性定位(sticky)
特点:
1. 粘性定位必须搭配一个移动属性才能有效果。
2. 当滚动条未滑动时, 粘性定位的特性和相对定位一样
3. 当滚动条滑动时,粘性定位的特性和固定定位一样
效果:
动图解读:
从图中可以看出, 滚动条未滑动时, 当前盒子( 加了定位的盒子 )仍占有原来位置,未脱离文档流, 符合相对定位的特性, 但是当滚动条滑动时, 当前盒子就不在占有原有位置,而是浮了起来,并且当前盒子不会随着滚动条移动,满足固定定位的特性,
所以说粘性定位是 固定定位和相对定位的结合体。