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：相对定位比较稳定，可以在占有原始位置的情况下，对加载效果区域进行位置调整，进行微调设置。或者对文字进行微调。
实际案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .nav{
            width: 500px;
            height: 50px;
            background-color: skyblue;
            margin: 50px auto;
            
        }
        .nav li{
            float: left;
            list-style: none;
        }
        .nav li a{
            display: inline-block;
            width: 100px;
            height: 50px;
            background-color: skyblue;
            text-decoration: none;
            color: white;
            font-size: 20px;
            text-align: center;
            line-height: 50px;
            border-right: 1px solid rgb(190, 181, 181);
        }
        a:hover{
            border-top: 2px solid chartreuse;
            /*这里用到了相对定位*/
            position: relative;
            top: -2px;
        }
    </style>
</head>
<body>
    <ul class="nav">
        <li><a href="http://www.lagou.com">首页</a></li>
        <li><a href="http://www.lagou.com">产品</a></li>
        <li><a href="http://www.lagou.com">支持</a></li>
        <li><a href="http://www.lagou.com">更多</a></li>
    </ul>
</body>
</html>

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

3.绝对定位

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

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

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

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

以<body>为参考元素

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

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

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

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

以祖先元素为参考元素

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

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

4.固定定位

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            height: 1000px;
        }
        .box1{
            background-color: pink;
            width: 100px;
            height: 100px;
            position: absolute;
            left: 100px;
            top: 100px;
        }
        .box2{
            background-color: yellow;
            width: 100px;
            height: 100px;
            position: fixed;
            right: 100px;
            bottom: 100px;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div></div>
</body>
</html>

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

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

5.定位应用

压盖效果

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

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

居中

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

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

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

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

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

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

源码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1{
            border: 5px solid red;
            height: 200px;
            width: 500px;
            position: relative;
            background-color: rgb(107, 107, 107);
        }
        .box2{
            position: absolute;
            background-color: pink;
            width: 100px;
            height: 100px;
            left: 50%;
            margin-left: -50px;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
</body>
</html>

压盖顺序

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1{
            background-color: pink;
            width: 300px;
            height: 300px;
        }
        .box2{
            background-color: skyblue;
            width: 200px;
            height: 200px;
            float: left;
        }
        .box3{
            background-color: green;
            width: 100px;
            height: 100px;
            position: absolute;
            top: 8px;
        }
        .box4{
            background-color: yellow;
            width: 50px;
            height: 50px;
            position: absolute;
            top: 8px;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
   <div class="box3"></div>
   <div class="box4"></div>
</body>
</html>

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

自定义压盖顺序

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

    <style>
         .box1{
            background-color: green;
            width: 100px;
            height: 100px;
            position: absolute;
            top: 8px;
            /* 设置压盖顺序 */
            z-index: 1;
        }
    </style>

前端文章汇总目录

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

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