| 前言 |
day5主要讲述了定位
其中包含，为什么需要定位及常用的定位模式
1、什么是定位？
定位，是将盒子固定在某一个位置上，可以自由的漂浮在其他盒子之上
2、边偏移
2.1边偏移概念
通过属性定义元素所在位置，向边上移动
2.2边偏移的属性，在CSS中通过，top，bottom，left，right四种属性定义边偏移
| 边偏移属性 | 示例 | 描述 |
|---|---|---|
| top | top: 80px | 顶端偏移量，定义元素相对于其父元素上边线的距离。 |
| bottom | bottom: 80px | 底部偏移量，定义元素相对于其父元素下边线的距离。 |
| left | left: 80px | 左侧偏移量，定义元素相对于其父元素左边线的距离。 |
| ight | right: 80px | 右侧偏移量，定义元素相对于其父元素右边线的距离 |
有定位的地方必有边偏移
3、定位的分类
3.1语法
选择器 { position: 属性值; }
3.2详细分类
| 值 | 语义 |
|---|---|
| static | 静态定位 |
| relative | 相对定位 |
| absolute | 绝对定位 |
| fixed | 固定定位 |
3.3相对定位（重点）
相对 定位是元素相对于它原来所在标准流中的位置来说的，就是从原来的位置进行位置偏移
相对定位的两个特点
- 相对于原来的标准流中位置来移动的
- 原来在标准流的区域继续占有，后面的盒子仍然以标准流的方式对待它
3.4绝对定位（重要）
绝对定位是元素以带有定位的父级元素来移动位置 （拼爹型）
完全脱标 —— 完全不占位置；
父元素没有定位，则以浏览器为准定位（Document 文档）.
绝对定位，父亲有定位，以父亲为基础
绝对定位的特点：（务必记住）
绝对是以带有定位的父级元素来移动位置 （拼爹型） 如果父级都 没有定位，则以浏览器文档为准移动位置
不保留原来的位置，完全是脱标的。
因为绝对定位的盒子是拼爹的，所以要和父级搭配一起来使用。
定位口诀：子绝父相
3.5固定定位（fixed）-重要
- 固定定位，完全脱标，完全不占位置
- 固定定位和父亲没有关系吗，不受父亲的影响
4、盒子层叠次序（z-index）
在使用定位布局时，可能会出现盒子重叠的情况。
加了定位的盒子，默认后来者居上， 后面的盒子会压住前面的盒子。
应用 z-index 层叠等级属性可以调整盒子的堆叠顺序
z-index 的特性如下:
- 属性值：正整数、负整数或 0，默认值是 0，数值越大，盒子越靠上
- 如果属性值相同，则按照书写顺序，后来居上
- 数字后面不能加单位
- 注意：z-index 只能应用于相对定位、绝对定位和固定定位的元素，其他标准流、浮动和静态定位无效
- 效果图
5、定位改变display属性
前面我们讲过， display 是 显示模式， 可以改变显示模式有以下方式:
可以用inline-block 转换为行内块
可以用浮动 float 默认转换为行内块（类似，并不完全一样，因为浮动是脱标的）
绝对定位和固定定位也和浮动类似， 默认转换的特性 转换为行内块。
一个行内的盒子，如果加了浮动、固定定位和绝对定位，不用转换，就可以给这个盒子直接设置宽度和高度等。
6、浮动元素，绝对定位（固定定位）元素都不会触发外边距合并的问题，盒子改变了浮动或者定位，就不会有垂直外边距合并的问题了
7、圆角矩形，分别设置矩形的四个角
7.1分别设置
border-top-left-radius:20px;
border-top-right-radius:20px;
border-bottom-right-radius:20px;
border-bottom-left-radius:20px;
7.2如果四个角值相同可以统一设置
border-top-left-radius:20px;
border-top-right-radius:20px;
border-bottom-right-radius:20px;
border-bottom-left-radius:20px;
7.3简写的形式
border-radius: 左上角 右上角 右下角 左下角;
/*圆角矩形*/
/*右上角*/
border-top-right-radius: 15px;
/*右下角*/
border-bottom-right-radius: 15px;
效果
7、小圆点效果
样式中代码
/*小圆点*/
.circle {
position: absolute;
left: 50%;
margin-left: -35px;
bottom: 10px;
width: 70px;
height: 13px;
background-color:rgba(255,255,255,0.3);
border-radius: 7px;
}
/*小圆点样式*/
.circle li {
float: left;
width: 8px;
height: 8px;
margin: 3px;
background-color: #fff;
border-radius: 50%;
}
结构中代码
<!--小圆点-->
<ul class="circle">
<li></li>
<li class="current"></li>
<li></li>
<li></li>
<li></li>
</ul>
效果图
8、定位总结
| 定位模式 | 是否脱标占有位置 | 移动位置基准 | 模式转换（行内块） | 使用情况 |
|---|---|---|---|---|
| 静态static | 不脱标，正常模式 | 正常模式 | 不能 | 几乎不用 |
| 相对定位relative | 不脱标，占有位置 | 相对自身位置移动 | 不能 | 基本单独使用 |
| 绝对定位absolute | 完全脱标，不占有位置 | 相对于定位父级移动位置 | 能 | 要和定位父级元素搭配使用 |
| 固定定位fixed | 完全脱标，不占有位置 | 相对于浏览器移动位置 | 能 | 单独使用，不需要父级 |
注意：
- 边偏移需要和定位模式联合使用，单独使用无效
- top 和 bottom 不要同时使用
- left 和 right 不要同时使用
完！欢迎评论区留言
