CSS定位知识点补充(父相子绝)

Running&Lover的博客

已于 2022-03-04 15:57:54 修改

阅读量554

点赞数 2

分类专栏： CSS 文章标签： css css3 javascript

于 2022-03-03 10:45:08 首次发布

本文链接：https://blog.csdn.net/m0_49662897/article/details/123181179

版权

CSS 专栏收录该内容

8 篇文章 1 订阅

订阅专栏

定位：

定位=定位模式(position)+边偏移(top,right,bottom,left)
定位模式：用于指定一个元素在文档中的定位方式，边偏移则决定了该元素的最终位置

静态定位：

position:static(元素的默认定位方式，无定位的意思，静态定位按照标准流的特性摆放位置，他没有边偏移，很少使用)

相对定位(重点)：

相对定位：元素在移动位置的时候，是相对于自身原来的位置来说的
注：相对定位是不脱标的，元素原来的位置依旧存在，不会被其他元素所占有
还是简单写一个小案例加深一下记忆：

<style>
    .box1 {
      /* 使用定位模式中的相对定位 */
      /* position: relative; */
      /* 设定偏移量 */
      /* top: 100px; */
      /* left: 100px; */
      width: 200px;
      height: 200px;
      background-color: pink;
    }
    .box2 {
      width: 200px;
      height: 200px;
      background-color: blue;
    }

  </style>
</head>
<body>
  <div class="box1"></div>
  <div class="box2"></div>
</body>