HTML
定位
- 定位指的就是将指定的元素摆放到页面的任意位置，通过定位可以任意的摆放元素
- 通过position属性来设置元素的定位
- 可选值
- static：默认值，元素没有开启定位
- relative：开启元素的相对定位
- absolute：开启元素的绝对定位
- fixed：开启元素的固定定位(也是绝对定位的一种)
1. 相对定位
当元素的position属性设置为relative时，则开启了元素的相对定位
- 当开启了元素的相对定位以后，而不设置偏移量时，元素不会发生任何变化
- 相对定位是相对于元素在文档流中原来的位置进行定位
- 相对定位的元素不会脱离文档流
- 相对定位会使元素提升一个层级
通常偏移量只需要使用两个就可以对一个元素进行定位，一般选择水平方向的一个偏移量和垂直方向的偏移量来为一个元素进行定位。
2. 绝对定位
当position属性值设置为absolute时，则开启了元素的绝对定位。
绝对定位：
- 开启绝对定位，会使元素脱离文档流
- 开启绝对定位以后，如果不设置偏移量，则元素的位置不会发生变化
- 绝对定位是相对于离它最近的开启了定位的祖先元素进行定位的(一般情况，开启了子元素的绝对定位都会同时开启父元素的相对定位)，如果所有的祖先元素都没有开启定位，则会相对于浏览器窗口进行定位。
- 绝对定位会使元素提升一个层级
- 绝对定位会改变元素的性质
- 内联元素变成块元素
- 块元素的宽度和高度默认都被内容撑开
3. 固定定位
.box2 {
width: 200px;
height: 200px;
background-color: yellow;
position: fixed;
left: 0px;
top: 0px;
}
当元素的position属性设置为fixed时，则开启了元素的固定定位，固定定位也是一种绝对定位，它的大部分特点都和绝对定位一样。
不同的是：
- 固定定位永远都会相对于浏览器窗口进行定位
- 固定定位会固定在浏览器窗口某个位置，不会随滚动条滚动。
4. (堆叠层级)z-index
如果定位元素的层级是一样，则下边的元素会盖住上面的。
如果通过z-index属性可以用来设置元素的层级
可以为z-index指定一个正整数作为值，该值将会作为当前元素的层级
层级越高，越优先显示
对于没有开启定位的元素不能使用z-index
父元素的层级再高，也不会盖住子元素
5. opacity
opacity属性设置元素的不透明级别
它需要一个0~1之间的值
- 0表示完全透明
- 1表示完全不透明
- 0.5 表示半透明
.box3 {
width: 200px;
height: 200px;
background-color: yellowgreen;
position: absolute;
z-index: 3;
top: 200px;
left: 200px;
opacity: 0.5;
}
