CSS布局之定位—静态定位—相对定位—绝对定位—子绝父相—固定定位—定位元素的层级关系—案例（重：水平垂直居中）

小琳爱分享

已于 2022-07-24 17:39:11 修改

阅读量962

点赞数 2

分类专栏： css 文章标签： css css3 html

于 2022-07-23 00:26:32 首次发布

本文链接：https://blog.youkuaiyun.com/qq_45708377/article/details/125938228

版权

本文详细探讨了CSS布局中的定位技术，包括静态定位、相对定位、绝对定位、子绝父相、固定定位及其层级关系。通过实例解析，如水平垂直居中、导航二维码居中和底部遮罩效果等，帮助读者掌握各种定位方法及其应用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS布局之定位

一.网页常见布局

标准流
①块级元素独占一行 → 垂直布局
②行内元素/行内块元素一行显示多个 → 水平布局
浮动：可以让原本垂直布局的块级元素变成水平布局
定位
①可以让元素自由的摆放在网页的任意位置
②一般用于盒子之间的层叠情况

二.常见场景

在这里插入图片描述

三.定位简介

在这里插入图片描述

四.静态定位

介绍：静态定位是默认值，就是之前认识的标准流（默认值）。
代码：position:static;
注意点：
①静态定位就是之前标准流，不能通过方位属性进行移动
②之后说的定位不包括静态定位，一般特指后几种：相对、绝对、固定
③静态定位能通过方位属性进行移动吗？
• 不能，静态定位的元素就是默认标准流的情况，

五.相对定位（相对自己定位）

介绍：自恋型定位，相对于自己之前的位置进行移动
代码：position:relative;
特点：
① 需要配合方位属性实现移动
② 相对于自己原来位置进行移动
③ 在页面中占位置 → 没有脱标
应用场景：
① 配合绝对定位组CP（子绝对父相对）
② 用于小范围的移动

<!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>
    * {
      margin: 0;
      padding: 0;
    }
    div {
      width: 300px;
      height: 300px;
    }
    .green {
      /* 1、定位方式-相对定位       位置占着，灵魂漂移 */
      position: relative;

      /* 2、偏移值 相对于自己之前的位置进行移动 */
      top: 100px;
      left: 100px;

      background-color: green;
    }
    .blue {
      background-color: blue;
    }
  </style>
</head>
<body>
  <div class="green"></div>
  <div class="blue"></div>
</body>
</html>