CSS定位中的静态定位和相对定位

最新推荐文章于 2024-07-18 15:25:55 发布

昱晟168

最新推荐文章于 2024-07-18 15:25:55 发布

阅读量801

点赞数

分类专栏： htmlcss中定位文章标签： css css3 前端

本文链接：https://blog.csdn.net/weixin_47267628/article/details/122148951

版权

htmlcss中定位专栏收录该内容

6 篇文章 1 订阅

订阅专栏

静态定位（static）了解

静态定位是元素的默认定位方式，无定位的意思

语法：

选择器： {position: static;}

静态定位按照标准流特性摆放位置，它没有边偏移
静态定位在布局时很少用到

意思就是：静态定位就是标准流的方式

相对定位（reative）重要

相对定位是元素在移动位置的时候，是相对它原来的位置来说的（相对于自己）

语法：

选择器： {position: relative;}

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

它是相对自己原来的位置来移动的（移动位置的时候参照点是自己原来的位置）
原来在标准流的位置继续占有，后面的盒子仍然以标签流的方式对待它（不脱标，继续保留原来位置）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    .div1 {
      /*  相对定位 */
      position: relative;
      top: 100px;
      left: 100px;
      
      width: 200px;
      height: 200px;
      background-color: red;
    }
    .div2 {
      width: 200px;
      height: 200px;
      background-color: pink;
    }
  </style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
</body>
</html>

没有相对定位前：

在这里插入图片描述
相对定位后：

昱晟168

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS定位中的静态定位和相对定位

静态定位（static）了解静态定位是元素的默认定位方式，无定位的意思语法：选择器： {position: static;}静态定位按照标准流特性摆放位置，它没有边偏移静态定位在布局时很少用到意思就是：静态定位就是标准流的方式相对定位（reative）重要相对定位是元素在移动位置的时候，是相对它原来的位置来说的（相对于自己）语法：选择器： {position: relative;}相对定位的特点（务必记住）它是相对自己原来的位置来移动的（移动位置的时候参照点是自己原来的位置）
复制链接

扫一扫