CSS定位及相对定位

CSS定位的属性

  • relative（相对的）
  • absolute（绝对的）
  • static（无定位的）
  • fixed（固定的）

相对定位

相对定位的概念

相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位，它将出现在它所在的位置上，然后，可以通过设置垂直或水平位置，让这个元素”相对于”它自身的起点进行移动，参考元素为本身

主要代码

1
2
3
position:relative;
top: 20px;
left: 30px;

绝对定位

绝对定位的概念

相对于已定位的最近的祖先元素，如果没有已定位的最近的祖先元素，那么它的位置就相对于最初的包含块（如body），参考的元素为祖先元素,类型float，产生浮动的效果（脱离文档流）

主要代码

1
position:absolute

相对定位与绝对定位的使用依据

使用绝对定位还是相对定位的一个判断依据就是文档流是否需要被破坏：绝对定位会破坏文档流——产生浮动效果

绝对定位与相对定位的区别

绝对定位的参照物是最近的祖先元素，如没有已定位的最近的祖先元素，参照物是body

相对定位的参照物是元素是元素本身

  1. 绝对定位元素相对的元素是它最近的一个祖先，该祖先满足：position的值必须是：relative、absolute、fixed，若没有这样的祖先则相对于body进行定位，
    所以当父类的position的值为relative，absolute或者fixed时，子类的绝对定位以父类为基准。当父类的position的值使用默认的static时，子类的绝对定位以body为基准
  2. 判断里面的块状元素的定位可以参考其父级元素和祖先元素的定位

相对和绝对定位与浮动之间的关系

  1. 在不设置定位（也就是默认定位static的情况下，对块级元素设置top/left等属性，无效）

  2. 使用绝对定位还是相对定位的一个判断依据就是文档流师傅需要被破坏：绝对定位会破坏文档流==》产生浮动的效果
    如底下代码，本来是想实现3个方块竖排紧贴在一起，实际效果：第二个覆盖第一个，第三个覆盖第二个，最终显示的只是第三个方块

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    <html>
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
           div{
            width: 100px;
            height: 100px;
           }
           .test1{
            background-color: red;
            position: absolute;/*绝对定位产生浮动*/
            top: 10px;
            left: 100px;
           }
            .test2{
            background-color: green;
            position: absolute;/*绝对定位产生浮动*/
            top: 10px;
            left: 100px;
           }
            .test3{
            background-color: blue;
            position: absolute;/*绝对定位产生浮动*/
            top: 10px;
            left: 100px;
           }
         </style>
    </head>
    <body>
        <div class="test1"></div>
        <div class="test2"></div>
        <div class="test3"></div>
    </body>
    </html>

  3. 作为父容器时，是使用相对定位还是绝对定位：
    当父一级div中只有一组子元素的时候，使用relative(相对定位)或absolute(绝对定位)都可以达到移动效果
    但当父容器中还有其他组的子元素时，就要考虑是否破坏文档流（是否使用absolute进行页面布局，浮动会导致文档流顶格）

绝对定位与浮动

绝对定位(absolute)与浮动(float)的对比

相同点：都会产生浮动，都会破坏文档流

不同点：float定位后，文档流其他文档会被绕开，不会遮挡。但是绝对定位会覆盖其他的内容

截图是float的演示效果（如果是相对定位，就直接部分文字被覆盖）

image-20220404164009253

相对定位与浮动

float和relative同时使用，会同时具有各自的特点

float——浮动，且文档流中的其他文档会被绕开，不会被遮掩

relative——定义容器四周的边距

z-index的使用

z-index用于改变层叠的顺序，数字大的先显示（稍后运行，显示在最外层）

主要代码

1
z-index：1;/*数字可以是任意的，但是为了以后修改方便，最好将前期的基础index的值，设置的较大一些，以便于后期插入新的元素（例如10、100的整倍数）*/

举例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
div{
    width: 100px;
    height: 100px;
}
.div1{
    background-color: red;
    z-index: 10;
    position: absolute;
    left: 100px;
    top: 20px;
}
.div2{
    background-color: green;
    z-index: 30;/*数字最大，所以最后运行在层叠样式的最外面*/
    position: absolute;
    left: 120px;
    top: 40px;
}
.div3{
    background-color: blue;
    z-index: 20;
    position: absolute;
    left: 140px;
    top: 60px;
}


image-20220404170654316

固定定位

固定定位的作用

固定定位：现对于浏览器窗口进行定位（固定元素不会随，页面的翻滚而滚动）

主要代码

1
position:fixed;