css-定位
- 定位
- 相对定位:relative
- 绝对定位:absolute
- 固定定位:fixed
- 相对定位
- 定义:相对于自己原来的位置。
- 使用效果
-
- 元素设置了相对定位后,还是标准文档流。
- 设置了相对定位后,可以使用四个方向的属性:top、bottom、left、right。
通过设置垂直或水平位置,让这个元素“相对于”它的起点进行移动。
-
- 相对定位的特点
-
- 不脱标(标准文档流)。
- 形影分离。
- 通过相对定位对元素进行移动后,原来的位置仍然保留。
- 设置相对定位后,元素的层级也会变高,会覆盖其他标准文档流元素。
-
- 作用:
-
- 对元素的位置进行轻微调整。
- 做子类元素绝对定位的参考,(父相子绝)
-
- 补充:不要用相对定位来做遮盖现象。
- 绝对定位
设置为绝对定位的元素框从文档流完全删除,并相对于其包含块定位,包含块可能是文档中的另一个元素或者是初始包含块。
元素原先在正常文档流中所占的空间会关闭,就好像该元素原来不存在一样。
元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。
-
- 绝对定位使元素的位置与文档流无关,也就是说设置了决定定位,元素“脱标“因此不占据空间。
- 绝对定位的元素的位置相对于最近的已定位祖先元素,如果元素没有已定位的祖先元素,那么它的位置相对于最初的包含块。
- 绝对定位的特点:
- 脱标。
- 做遮盖效果,提高了层级;
- 设置绝对定位之后,不区分行内元素和块级元素,都能设置宽高。
-
- 绝对定位参考点(重点)
- 单独对一个盒子进行绝对定位的时候
- 如果使用top属性进行描述的时候,参考点是以页面左上角为基准的。
- 如果使用bottom属性进行描述的时候,参考点是以 首屏页面左下角为基准的。
- 单独对一个盒子进行绝对定位的时候
- 绝对定位参考点(重点)