CSS的常用五种定位方式-前端开发-阁主学习小站

摘要：

本文记录PHP中文网23期前端部分的五种CSS的定位方式。

5种定位方式：

元素默认的定位都是static方式，只有定位方式不等于static时，其他方法的定位才能起作用。

定位元素: position: static
相对定位: position: relative
绝对定位: position: absolute
固定定位: position: fixed
粘性定位: position: sticky

static静态定位

当我们没有指定定位方式的时候，这时默认的定位方式就是static，也就是按照文档的书写布局自动分配在一个合适的地方，这种定位方式用margin来改变位置，对left、top、z-index等设置值无效，这种定位不脱离文档流；

relative相对定位

该定位是一种相对的定位，可以通过设置left、top等值，使得指定元素相对其正常的位置进行偏移，这种定位不脱离文档流；
示例代码：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>相对定位</title>
</head>
<body>
  <div class="box one"></div>
  <div class="box two"></div>

  <style>
    .box {
      width: 200px;
      height: 50px;
      border: 1px solid #000;
    }

    .box.one {
      background-color: lightcyan;
    }

    .box.two {
      background-color: lightgrey;
    }

    /* 相对定位 */
    .box.one {
      position: relative;
      top: 30px;
      left: 30px;

      /* 仍在文档流中,相对于它的原始位置(文档流中的位置)进行偏移 */
    }
  </style>
</body>
</html>

absolute绝对定位

这种定位通过设置top、right、bottom、left这些偏移值，相对于 static 定位以外的第一个父元素进行定位（这种定位通常设置父元素为relative定位来配合使用），在没有父元素的条件下，它的参照为body，该方式脱离文档流；
示例代码：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>绝对定位</title>
</head>

<body>
  <div class="box1">
    <div class="box2">
      <div class="box3">box</div>
    </div>
  </div>

  <style>
    .box1 {
      width: 300px;
      height: 300px;
      border: 1px solid #000;
      background-color: #eee;
    }

    .box2 {
      width: 200px;
      height: 200px;
      border: 1px solid #000;
      background-color: lightcyan;
    }

    .box3 {
      width: 100px;
      height: 100px;
      border: 1px solid #000;
      background-color: wheat;
    }

    /* 绝对定位: 总是相对于距离最近的"定位的祖先元素"进行偏移*/
    .box3 {
      position: absolute;
      /* 右下角 */
      right: 0;
      bottom: 0;
    }

    /* box3它的祖先元素: box2,box1,body,html 没有定位元素 */
    /* 所以,就直接相对于"最终包含块"的容器进行定位 */

    /* 相对于box1进行绝对定位 */
    .box1 {
      /* 将它转来定位元素 */
      position: relative;
    }

    .box2 {
      /* 将它转来定位元素 */
      position: relative;
    }

    /* 固定定位: 它总是相对一个固定的元素进行偏移,其实是绝对定位的一个子集 */
    .box3 {
      position: fixed;
    }

    /* 固定定位:不论它有多少个可定位的祖先元素全部忽略,总是相对于最初包含块定位 */
  </style>
</body>

</html>

fixed固定定位

这种定位方式是相对于整个文档的，只需设置它相对于各个方向的偏移值，就可以将该元素固定在页面固定的位置，通常用来显示一些提示信息，脱离文档流；
示例代码见上面绝对定位末尾示例。

sticky粘性定位

sticky跟前面四个属性值都不一样，它会产生动态效果，很像relative和fixed的结合：一些时候是relative定位（定位基点是自身默认位置），另一些时候自动变成fixed定位（定位基点是视口）。

语法选择器 { position: sticky; top: 10px; }

sticky能够形成”动态固定”的效果。比如，百度新闻首页的导航栏，初始加载时在自己的默认位置（relative定位）
示例代码：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>粘性定位</title>
</head>

<body>
  <div class="box">
    <div>
      <div class="title">习近平将对俄罗斯进行国事访问</div>
      <div class="content"></div>
    </div>
    <div>
      <div class="title">安徽,接下来雨雨雨!大幅降温!</div>
      <div class="content"></div>
    </div>
    <div>
      <div class="title">郭文贵在美国被捕后公寓突然失火</div>
      <div class="content"></div>
    </div>
  </div>

  <style>
    .box {
      width: 400px;
      border: 1px solid #000;
    }

    .box .title {
      height: 30px;
      font-weight: bolder;
      border: 1px solid #000;
      background-color: lightcyan;
    }

    .box .content {
      /* 为什么这么大,是想出现滚动条 */
      min-height: 1000px;
      background-color: #eee;
    }

    .box .title {
      /* 粘性定位 = 静态定位 + 固定定位 */
      position: sticky;
      /* 滚动到top=0就会自动停止并固定到这个位置 */
      top: 0;
      /* 导航或广告位 */
    }
  </style>
</body>

</html>

本文地址：https://www.mainblog.cn/320.html
版权声明：本文为原创文章，版权归阁主所有，欢迎分享本文，转载请保留出处！
免责申明：有些内容源于网络，没能联系到作者。如侵犯到你的权益请告知，我们会尽快删除相关内容。