[13th-铁人赛]Day 11:Modern CSS 超详细新手攻略 - Position (一)

Position顾名思义就是定位元素的在网页上的位置，有5种属性值：static(预设)、relative(相对定位)、absolute(绝对定位)、fixed(固定)以及新加入的sticky

relative 相对定位

相对自身原本位置做移动


使用left、top、right、bottom进行移位

absolute 绝对定位

以父元素作为基准做移动


注意：父元素的定位必须是预设static之外的属性才可运作

再继续介绍定位之前，先来介绍一个z-index属性

z-index

设定元素的层级，层级越高会盖住其他元素，反之层级越低就会被其他元素盖住(可以为负数)

• z-index只在有设定position属性的元素上运作

层级顺序

在未使用z-index时，层级顺序为如下:

1. html元素
2. html依序撰写的元素，越後者层级越高
3. 已设定定位元素，都是定位元素时，依旧是越後者层级越高

注意事项

1. z-index只能在有定位的元素下运作
2. 子元素若为absolute定位，父元素须设定预设以外的定位属性
3. 子元素的z-index属性只在父元素中有用
   
   即使粉色层级高於绿色，但他们非属同个父元素，因此z-index由各自父元素影响