范仁义css3课程---24、层布局模型介绍

范仁义css3课程---24、层布局模型介绍

一、总结

一句话总结：

层布局模型就像是图像软件PhotoShop中非常流行的图层编辑功能一样，能够对每个图层进行精确定位操作。通过postion属性来设置。常见的有相对定位(relative)、绝对定位(absolute)、固定定位(fixed)三种。

 

 

 

二、层布局模型介绍

博客对应课程的视频位置：24、层布局模型介绍
https://www.fanrenyi.com/video/10/64

 

 

层布局模型就像是图像软件PhotoShop中非常流行的图层编辑功能一样，每个图层能够精确定位操作。
如何让html元素在网页中精确定位，就像图像软件PhotoShop中的图层一样可以对每个图层能够精确定位操作。CSS定义了一组定位（position）属性来支持层布局模型。
层模型有三种形式：

1、绝对定位(position: absolute)

2、相对定位(position: relative)

3、固定定位(position: fixed)

 

2、position的属性值

static：默认值，元素没有开启定位

relative：开启元素的相对定位

absolute：开启元素的绝对定位

fixed：开启元素的固定定位（也是绝对定位的一种）