box-shadow属性四个值_CSS-定位属性-优快云博客

好好学习，天天向上

本章主要内容是：(相对、绝对、固定)定位、定位应用、压盖顺序、一个综合案例

一、定位属性 position

属性名：position
属性值：relative 相对定位、absolute 绝对定位、fixed 固定定位

作用：设置定位的元素，它需要根据某个参考元素发生位置的偏移

Ⅰ、偏移量属性

定位的元素要想发生位置的移动，必须搭配偏移量属性进行设置

水平方向：left、right
垂直方向：top、bottom
属性值：常用 px 为单位的数值，或者百分比

①、相对定位

属性值：relative，相对的意思
参考元素：标签加载的原始位置
必须搭配偏移量属性才能发生位置移动

示例图：

相对定位的性质

性质：相对定位的元素不脱离标签的原始状态（标准流、浮动），不会让出原来占有的位置
元素显示效果上，原位留坑，形影分离

注意事项

1、偏移量属性的值是区分正负的

正数：表示偏移方向与属性名方向相反
负数：表示偏移方向与属性名方向相同

2、同一个方向，不能设置两个偏移量属性，如果水平方向同时设置了 left 和 right 属性，只会加载 left 属性。垂直方向只加载 top 属性

建议：书写时从水平方向和垂直方向各挑一个属性进行组合

3、由于相对定位的参考元素是自身，left 的正值等价于 right 的负值，top 的正值等价于 bottom 的负值

为了方便记忆，可以选择只使用 left、top 组合

实际应用

由于相对定位元素比较稳定，不会随意让出位置，可以将相对定位的元素作为后期绝对定位的参考元素，就是所说的子绝父相情况
相对定位比较稳定，可以在占有原始位置的情况下，对加载效果区域进行位置调整，进行微调设置。或者对文字进行微调

效果图：

代码地址：

01-02-task -materials/01-相对定位的应用.html · 吴腾辉/前端案例和应用源码 - Gitee.comgitee.com

②、绝对定位

属性值：absolute，绝对的意思
参考元素：参考的是距离最近的有定位的祖先元素，如果祖先都没有定位，参考 <body>
必须搭配偏移量属性才会发生位置移动

示例图：

绝对定位的性质

性质：绝对定位的元素脱离标准流，会让出标准流位置，可以设置宽高，也可以随时定义位置，绝对定位的元素不设置宽高只能被内容撑开
注意1：绝对定位的参考元素是不固定的，不同的参考元素以及不同的偏移量组合，会导致绝对定位元素的参考点不同，具体位移效果不同
注意2：在绝对定位中，由于参考点不同，left 正值不再等价于 right 的负值

<body> 为参考元素的参考点

以 <body> 为参考元素时，参考点的确定与偏移量方向有关
第一，如果有 top 参与的定位，参考点就是页面的左上顶点和右上顶点。自身的对比点是盒子的所有盒模型属性最外面的左上角或右上角
第二，如果有 bottom 参与的绝对定位，参考点是页面首屏的左下顶点或右下顶点。对比点是盒子的所有盒模型属性最外面的左下角或右下角

实际应用中，如果以 <body> 为参考元素，不同分辨率的浏览器中，绝对定位的元素位置是不同的，所以较少使用 <body> 作为参考元素

祖先级为参考元素

如果祖先级中有定位的元素，就不会去参考 <body>
参考元素：参考的是祖先元素中有任意定位的，在 HTML 结构中距离目标最近的祖先

根据绝对定位的参考元素的定位类型不同，有三种定位组合方式：子绝父相、子绝父绝、子绝父固，由于相对定位的祖先级位置更稳定，大多使用子绝父相的情况

祖先元素参考点

如果绝对定位的参考元素是某个祖先级，参考点是盒子 border 以内的四个顶点，组合方向决定了参考点, 绝对定位的元素只关心对比点和参考点之间的距离，会忽视参考元素的 padding 区域
left、top：参考点是祖先的 border 以内的左上顶点，对比点是盒子自身的左上角
right、top：参考点是祖先的 border 以内的右上顶点，对比点是盒子自身的右上角
left、bottom：参考点是祖先的 border 以内的左下顶点，对比点是盒子自身的左下角
right、bottom：参考点是祖先的 border 以内的右下顶点，对比点是盒子自身的右下角

③、固定定位

属性值：fixed，固定的意思
参考元素：浏览器窗口
参考点：浏览器窗口的四个顶点。跟偏移量组合方向有关
由于浏览器窗口的四个顶点位置不会发生变化，会导致固定定位的元素会始终显示在定位位置

示例图：

固定定位的性质

性质：固定定位的元素脱离标准流，让出标准流位置，可以设置宽高，根据偏移量属性可以任意设置在浏览器窗口的位置。固定定位的元素会始终显示在浏览器窗口上

④、定位应用

定位 position 根据属性值不同有三种类型的定位效果，其中绝对定位和固定定位的元素会脱离标准流,，三种定位在页面中有各自的使用场景

压盖效果

所有的定位类型都可以实现压盖效果
由于绝对定位的元素脱标，不占标准流位置，压盖效果更彻底，实际工作中，常见的是绝对定位制作的压盖

示例图：

居中

定位的元素，如果想在参考元素中居中显示，有自己的居中方法：

1、第一步：在居中的方向使用一个偏移量属性，例如 left，设置属性值为 50%。导致图片的左顶点移动到参考元素的中心位置

百分比形式的属性值，百分百参考的是参考元素的 border 以内的宽度、高度

2、第二步：给绝对定位的子盒子设置一个同方向的 margin，例如 margin-left，属性值为负的自身宽度的一半

示例图：

扩展应用

①、解决标准流中，宽的子盒子在窄的父盒子中的居中，可以设置大的子盒子相对定位，利用相对定位居中的方法进行居中

示例图：

②、浮动的元素居中，在不改变原始浮动状态情况下，可以利用相对定位居中方法

⑤、压盖顺序

实际使用定位时，可能出现多个定位的元素加载到同一个位置的情况，这时候压盖的顺序是可以控制的

默认压盖顺序

定位的元素不区分定位类型，都会去压盖标准流或浮动的元素
如果都是定位的元素，在 HTML 中后写的定位压盖先写的定位
因此，书写代码时，需要注意压盖效果，必须合理设置 HTML 元素的书写顺序

自定义压盖顺序

如果想更改定位的元素的压盖顺序，可以设置一个 z-index 属性
属性值：数字

/* 给灰色设置 z-index */

自定义压盖顺序注意事项

属性值大的会压盖属性值小的，设置z-index属性的会压盖没有设置的
如果属性值相同，比较HTML书写顺序，后写的压盖先写的
z-index属性只能设置给定位的元素才会生效，如果给没有定位的元素设置，不会生效
父子盒模型中，如果父子盒子都进行了定位，与其他的父子级有压盖的部分：
父级盒子：如果不设置z-index，后写的压盖先写的；如果设置了z-index，值大的压盖值小的
子级盒子：如果父级没有设置z-index属性，子级z-index大的会压盖小的；如果父级设置了 z-index值，无论子级值是多少，都是父级的值大的子级压盖父级值小的子级，俗称“从父效应”

⑥、综合案例

静态轮播图

代码地址：

01-02-task -materials/案例-静态轮播图布局.html · 吴腾辉/前端案例和应用源码 - Gitee.comgitee.com