CSS定位中绝对定位和固定定位（重点）

绝对定位 absolute (重要)绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的（就是相对父元素或爷爷元素来说）语法：选择器 {position: absolute;}绝对定位的特点：（务必记住）如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位（Document文档）如果祖先元素有定位（相对，绝对，固定定位），则以最近一级的有定位祖先元素为参考点移动位置绝对定位不再占有原先的位

昱晟168

4406人浏览 · 2021-12-25 21:37:13

昱晟168 · 2021-12-25 21:37:13 发布

绝对定位 absolute (重要)

绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的（就是相对父元素或爷爷元素来说）

语法：

选择器 {position: absolute;}

绝对定位的特点：（务必记住）

如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位（Document文档）
如果祖先元素有定位（相对，绝对，固定定位），则以最近一级的有定位祖先元素为参考点移动位置
绝对定位不再占有原先的位置 (脱标)

绝对定位第一种特点：没有祖先元素或者祖先元素没有定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    .myDiv {
      /*没有祖先元素的定位情况*/
      position: absolute;
      top: 10px;
      right: 200px;
      width: 200px;
      height: 50px;
      background-color: pink;
    }
    /*有祖先，但是祖先没有定位的情况*/
    .father {
      width: 200px;
      height: 200px;
      background-color: green;
    }
    .son {
      /*儿子元素有定位*/
      position: absolute;
      bottom: 200px;
      left: 100px;
      width: 100px;
      height: 120px;
      background-color: red;
    }
  </style>
</head>
<body>
<div class="myDiv"></div>
<div class="father">
  <div class="son"></div>
</div>
</body>
</html>

在这里插入图片描述
绝对定位第二种特点：如果父元素有定位则以，父元素为准；如果父元素没有定位但是爷爷元素有定位，则以爷爷元素为准；如果父元素和爷爷元素都有定位则以最近一级的有定位的元素，就是父元素了

注意是：只要是相对或绝对或固定定位的一种就可以了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    .father {
      /*父元素有定位*/
      position: relative;
      width: 300px;
      height: 300px;
      background-color: pink;
    }
    .son {
      position: absolute;
      top: 43px;
      left: 43px;
      width: 100px;
      height: 100px;
      background-color: red;
    }
  </style>
</head>
<body>
  <div class="father">
    <div class="son"></div>
</div>
</body>
</html>

在这里插入图片描述
绝对定位第三种特点 :绝对定位不再占有原先的位置（脱标）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    .father {
      /*父元素有定位*/
      position: relative;
      width: 300px;
      height: 300px;
      background-color: pink;
    }
    .son {
      position: absolute;
      top: 43px;
      left: 43px;
      width: 100px;
      height: 100px;
      background-color: red;
    }
    .son2 {
      width: 100px;
      height: 50px;
      background-color: blue;
    }
  </style>
</head>
<body>
  <div class="father">
    <div class="son"></div>
    <div class="son2"></div>
</div>
</body>
</html>

在这里插入图片描述

子绝父相的由来

问题：

绝对定位和相对定位到底有什么使用场景呢？
为什么说相对定位给绝对定位当爹的呢？

弄清楚这个口诀，就明白了绝对定位和相对定位的使用场景

这个“子绝父相”太重要了，是我们学习定位的口诀，是定位中最常用的一种方式这句话的意思是：子级是绝对定位的话，父级要用相对定位。

子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子，
父盒子需要加定位限制子盒子在父盒子内显示
父盒子布局时，需要占有位置，因此父亲只能是相对定位

这就是子绝父相的由来; 所以相对定位经常用来作为绝对定位的父级

总结：因为父级需要占有位置，因此是相对定位，子盒子不需要占有位置，则是绝对定位

当然，子绝父相不是永远不变的，如果父元素不需要占有位置时，子绝父绝也有。

子绝父相练习

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }
        .content {
            /*给父元素添加相对定位*/
            position: relative;
            margin: 0px auto;
            width: 230px;
            height: 270px;
            background-color: pink;
        }
        .content > img {
            width: 100%;
        }
        .content h5 {
            padding: 10px 20px;
            font-size: 14px;
            color: #050505;
        }
        .content p {
            padding: 10px 20px;
            font-size: 12px;
            color: #050505;
        }
        .content p span {
            margin-right: 20px;
            color: #ff7c2d;
        }
    /*给span中的img标签添加绝对定位*/
        .content span img {
            position: absolute;
            top: 4px;
            right: -4px;
        }
    </style>
</head>
<body>
<div class="content">
    <span><img src="img/hot.png"> </span>
    <img src="img/img.png">
    <h5>Angular 2 最新框架+主流技术+项目实战 </h5>
    <p><span>高级</span>  &nbsp;  • &nbsp; 1125人在学习</p>
</div>
</body>
</html>

固定定位fixed（重要）

固定定位是元素固定于浏览器可视区的位置。主要使用场景：可以在浏览器页面滚动时元素的位置不会改变。

语法：

选择器 {position: fixed;}

固定定位特点：（务必记住）

1.以浏览器的可视窗口为参照点移动元素

跟父元素没有任何关系
不随滚动条滚动

2.固定定位不在占有原先的位置

固定定位也是脱标的，其实固定定位也可以当作一种特殊的绝对定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    img {
      position: fixed;
      top: 100px;
      left: 20px;
    /*  注意是：固定定位和绝对定位一样是不占有位置的*/
    }
  </style>
</head>
<body>
<div>
  <img src="img/pvp.png">
  <p>海康</p>
  。。。
  <p>海康</p>
</div>
</body>
</html>

在这里插入图片描述
固定定位练习

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    div {
      margin: 0px auto;
      width: 500px;
      height: 1681688px;
      background-color: #ff7c2d;
    }
    .left {
      position: fixed;
      top: 10px;
      left: 10px;
      width: 20px;
      height: 20px;
      background-color: red;
    }
    .right {
      position: fixed;
      top: 10px;
      right: 10px;
      width: 20px;
      height: 20px;
      background-color: red;
    }
  </style>
</head>
<body>
<div>
  <p class="left"></p>
  <p class="right"></p>
</div>
</body>
</html>

固定定位小技巧：固定在版心右侧位置

小算法：

让固定定位的盒子left: 50%，走到浏览器可视区（也可以看做版心）的一半位置
让固定定位的盒子margin-left: 版心宽度的一半距离，多走版心宽度的一半的位置

就可以让固定定位的盒子贴着版心右侧对齐了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    /*固定定位小技巧：固定在版心右侧位置两个步骤：

    1.让固定定位的盒子left：50%；走到版心的一半
    2.让固定定位盒子margin-left：走版心的一半

    */
    div {
      /*给父元素添加相对定位*/
      position: relative;

      margin: 0px auto;
      width: 500px;
      height: 168168px;
      background-color: #ff7c2d;
    }
    p {
      /*给子元素添加绝对定位，并且给出定位的位置*/
      position: fixed;
      left: 50%;
      margin-left: 250px;
      width: 20px;
      height: 30px;
      color: red;
    }
  </style>
</head>
<body>
<div>
  <p>湛江</p>
</div>
</body>
</html>