【33】CSS核心样式（9）——定位属性（下）

倏存

已于 2022-07-12 21:39:55 修改

阅读量203

点赞数 1

分类专栏：前端基础文章标签： css html 原力计划

于 2021-04-07 14:36:13 首次发布

本文链接：https://blog.csdn.net/weixin_47640160/article/details/115408887

版权

前端基础专栏收录该内容

79 篇文章 7 订阅

订阅专栏

本文详细介绍了CSS3中的定位技术，包括绝对定位和固定定位如何实现压盖效果，以及如何通过居中定位方法使元素在参考元素中居中。重点讲解了压盖顺序，包括默认的压盖规则和通过z-index属性自定义压盖顺序。同时强调了z-index属性的使用注意事项，如仅对定位元素生效，并遵循特定的层级逻辑。

摘要由CSDN通过智能技术生成

接上篇，本篇 • 定位应用 • 压盖顺序
在这里插入图片描述

五、定位应用

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

1. 压盖效果

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

2.居中定位的元素

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

①在居中的方向使用一个偏移量属性，例如 left，设置属性值为 50%。导致图片的左顶点移动到参考元素的中心位置。百分比形式的属性值，百分百参考的是参考元素的 border 以内的宽度、高度。
position: absolute;
left: 50%;
②给绝对定位的子盒子设置一个同方向的 margin，例如 margin-left，属性值为负的自身宽度的一半。
position: absolute; 
left: 50%; 
width: 100px; 
margin-left: -50px;
注意：不论子盒子的宽度是否比参考元素更宽，都能使用以上方法进行居中设置。

3.扩展应用

解决标准流中，宽的子盒子在窄的父盒子中的居中，可以设置大的子盒子相对定位，利用相对定位居中的方法进行居中；
浮动的元素居中，在不改变原始浮动状态情况下，可以利用相对定位居中方法。

六、压盖顺序

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

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

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

3.自定义压盖顺序注意事项 :
①属性值大的会压盖属性值小的，设置z-index属性的会压盖没有设置的。
②如果属性值相同，比较HTML书写顺序，后写的压盖先写的。
③z-index属性只能设置给定位的元素才会生效，如果给没有定位的元素设置，不会生效。
④父子盒模型中，如果父子盒子都进行了定位，与其他的父子级有压盖的部分：
(1)父级盒子：
如果不设置z-index，后写的压盖先写的；
如果设置了z-index，值大的压盖值小的。
(2)子级盒子：
如果父级没有设置z-index属性，子级z-index大的会压盖小的；
如果父级设置了 z-index值，无论子级值是多少，都是父级的值大的子级压盖父级值小的子级，俗称“从父效应”。

下篇继续【34】CSS3（1）—— 新增选择器①子级选择器