CSS position定位&z-index层级

1. 定位position:

(1). 相对定位relative:

• 元素相对定位: a. 相对于元素在文档流中原本的位置定位的 b. 不脱离文档流 c. 如果不设置偏移量,元素不会发生任何变化
• 不改变元素性质(块级/内联元素)

(2). 绝对定位absolute:

• 绝对定位的元素: a. 相对于最近开启定位的父元素定位,如果没有,则相对于窗口定位 b. 脱离文档流
• 会改变元素性质,内联元素会转换为块元素

(3). 固定定位fixed:

• 脱离文档流
• 固定定位永远相对于窗口定位,不随滚动条滚动

(4). 默认值static:

• 没有定位

2. 层级z-index:

• 只有开启定位的元素才可以设置z-index
• 属性值: a. 整数 b. 数值越大,层级越高,越靠前展示