1-2-7【CSS核心样式】CSS定位

每天都累的要死，但只要想着能做出来东西，就很开心~

---

文章内容输出来源：拉勾教育大前端就业集训营

1.定位属性

• 概述：在之前的课程中，大家已经学习过了盒模型、浮动这些布局相关的内容。而定位是另一种布
  局的重要属性，常用于制作压盖或者位置相关的效果。
• 属性名：position
• 属性值：

属性值	效果
relative	相对定位，相对标签自身原始位置定位
absolute	绝对定位，以最近的带有定位属性的父元素或body为基准进行定位
fixed	固定定位，以浏览器窗口的四个顶点为基准进行定位

• 偏移量属性：定位的元素要想发生位置的移动，除了需要确定定位类型外，还必须搭配偏移量属性进行设置。
  • 水平方向：left、right;
  • 垂直方向：top、bottom;
  • 属性值：常用px为单位的数值，%也可以。

说明：偏移量属性必须配合定位属性使用，否则就算定义了偏移量，元素也不会发生任何移动！

2.相对定位

• 属性值：relative
• 参考元素：以标签自身的原始加载位置为基准，进行偏移。

说明：偏移量属性方向的理解可能会比较绕，比如说left:50px;实际上是元素向右移动50像素，可以理解为“新位置相对老位置为向左50px”。

• 性质：相对定位的元素不脱离标签的原始状态(标准流、浮动)，不会让出原来占有的位置。
• 注意事项1：偏移量的属性值是区分正负的；
• 注意事项2：同一个方向，不能设置两个偏移量。若同时设置了left和right则以left为主，同时设置了top和bottom则以top为主。

说明：第4个盒子没有侵占第3个盒子的原始位置；left为-50px，盒子向反方向移动；left和right同时设置，以left为主，所以依然向左移动50px。

• 应用1：由于相对定位元素比较稳定，不会随意让出位置，可以将相对定位元素作为后期绝对定位的参考元素
• 应用2：相对定位比较稳定，可以在占有原始位置的情况下，对加载效果区域进行位置调整，进行微调设置。或者对文字进行微调。
• 实际案例：

    
    
    
    


    

        
首页
        
产品
        
支持
        
更多
    

说明：本案例模仿了“导航栏中鼠标悬停”时的效果。如果不增加向上偏移的效果，a元素因为在鼠标悬停时增加了“上边框”，所以整体会下移。

3.绝对定位

• 属性值：absolute
• 参考元素：参考的是距离最近的有定位的祖先元素，如果祖先都没有定位，参考元素。

说明：父元素存在定位属性（案例中设定为相对定位），则子元素的绝对定位会参照父元素的位置进行偏移。

• 性质：绝对定位的元素脱离标准流，会让出标准流位置，可以设置宽高，也可以随时定义位置，绝对定位的元素不设置宽高只能被内容撑开。

说明：如图所示，粉色盒子脱离了标准流，第三个盒子占据了粉色盒子的位置。而且粉色盒子没有带有定位属性的父元素，所以参照元素定位。

以为参考元素

• 如果有top（bottom）参与的绝对定位，参考点就是 页面的上顶点（下顶点）。
• 如果有left（right）参与的绝对定位，参考点就是 页面的左顶点（右顶点）。

说明：所以垂直和水平方向属性的配合，可以确定一个唯一的顶点作为参考，进行偏移。
例如，设置了top和left属性，则参考点为左上角；bottom和right属性，则参考点为右下角。

说明：粉色盒子以页面左上角为参考点，蓝色盒子以页面右下角为参考点。

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

以祖先元素为参考元素

• 参考点是盒子border以内的四个顶点，组合方向决定了参考点。
  • 与“以body为参考元素”类似，设置top和right属性，则以父元素的右上顶点为参考点，以此类推。
• 绝对定位父元素的参考点是border以内的顶点，有无padding不影响；而元素自身的偏移参考点是整个盒模型最外层的区域，有margin则margin顶点为参考点，有border无margin则border顶点为参考点，以此类推。

说明：第一个粉盒子以父元素的左上角为参考点；第二个粉盒子以父元素的右下角为参考点。

4.固定定位

• 属性值：fixed
• 参考元素：参考的是浏览器窗口的四个顶点，同样，具体是哪一个顶点由偏移属性的组合决定。
• 注意：由于浏览器窗口的四个顶点位置不会发生变化，会导致固定定位的元素会始终显示在定位位置，不会随着页面滚动而移动。

说明：这里肯定有小伙伴想到了，“固定定位”和“以body为参考元素的绝对定位”难道不一样吗？
答：不一样！以body为参考元素定位，元素会随着窗口滚动而滚走，但是以浏览器窗口为参考元素定位，元素位置不会发生变化！body和浏览器窗口是两个概念！

说明：粉色盒子是以body为参考元素的绝对定位，黄色盒子是固定定位。

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

5.定位应用

压盖效果

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

说明：上图案例中p标签使用绝对定位，对图片进行了压盖。

居中

• 概述：在1-2-2盒模型文章中，我们学到了一种使元素水平居中显示的方法，使用定位同样可实现元素的水平居中。

文章地址：1-2-2盒模型

• 步骤一：在水平方向设置一个偏移量left值为50%。

说明：其意义为将元素向右移动父元素宽度50%的距离

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

说明：其意义是把盒子整体向左拉一半自身的宽度，从而达到居中效果。

• 源码如下：

压盖顺序

• 概述：实际使用定位时，可能出现多个定位的元素加载到同一个位置的情况，这时候压盖的顺序是可以控制的。
• 默认压盖顺序：定位的元素不区分定位类型，都会去压盖标准流或浮动的元素。如果都是定位的元素，在HTML中后写的定位压盖先写的定位。

说明：粉色盒子是标准流，所以在最下面；蓝色盒子是浮动所以在标准流上方；绿色盒子是绝对定位，所以在蓝色盒子上面；黄色盒子也是绝对定位，但代码书写顺序靠后，所以在绿色盒子上面。

自定义压盖顺序

• 概述：如果想更改定位的元素的压盖顺序，可以设置一个z-index属性。
• 属性值：数字。
• 注意事项：
  • 属性值大的会压盖属性值小的，设置z-index属性的会压盖没有设置的。
  • 如果属性值相同，比较HTML书写顺序，后写的压盖先写的。
  • z-index属性只能设置给定位的元素才会生效，如果给没有定位的元素设置，不会生效。
  • 父子盒模型中，如果父子盒子都进行了定位，与其他的父子级有压盖的部分:
    • 父级盒子:如果不设置z-index，后写的压盖先写的；如果设置了z-index，值大的压盖值小的。
    • 子级盒子:如果父级没有设置z-index属性，子级z-index大的会压盖小的;如果父级设置了z-index值，无论子级值是多少，都是父级的值大的子级压盖父级值小的子级，俗称“从父效应”。

前端文章汇总目录

https://www.jianshu.com/p/6d80dd616ff4

---

结束语：一花一世界，一木一浮生，愿与诸君共勉~