@author 鲁伟林
CSS 语法中, 对于 position 的使用一直搞不清楚, 特写此博客, 帮助自己理解和记忆
CSS 中的定位(position)
1. position 的定义
允许用户精确定义元素框出现的相对位置可以是相对于它通常出现的位置, 相对于其上级元素, 相对于另一个元素, 或者相对于浏览器视窗本身
2. position 的属性值
position 属性指定了元素的定位类型 position 属性的四个值 static 和 relative 在文档流中, 与 fixed 和 absolute 相反
- 1.static
- 2.relative3.fixed4.absolute
- 2.1 static
1.static 是 position 的缺省值, 一般不设置 position 属性时, 默认是 static2. 静态定位元素 (static) 不会受到 top,bottom,left,right 影响
2.2 relative
1. 相对本身位置的偏移(static 定位下的元素位置为本身位置)2. 受到 topbottomleftright 影响 3. 且不会影响后面其他元素的位置 4. 原本空间不会改变(static 和 relative 在文档流中, 与 fixed 和 absolute 相反)
2.3 fixed
fixed 是特殊的 absolute, 即 fixed 总是以浏览器的可视窗口 (屏幕内网页窗口) 进行定位不占据空间
2.4 absolute
当一个元素 A 设置了 position:absolute 后, 分为两种情况:
1. 当元素 A 的父对象设置了 position 属性, 且 position 的属性值为 absolute 或 relative 或 fixed, 也就是说不是默认的, 则元素 A 按照父对象来定位如果父对象设置了 marginborderpadding 等属性, 则元素 A 将会从 padding 开始的地方进行定位
2. 如果元素 A 没有一个 position 属性的父对象, 则以 body 为定位对象
来源: https://www.2cto.com/kf/201803/732258.html