css定位

孙景荣

已于 2023-01-28 19:50:58 修改

阅读量61

点赞数 1

分类专栏： CSS 文章标签： css 前端

于 2022-09-30 20:34:16 首次发布

本文链接：https://blog.csdn.net/ssjjrr/article/details/127128757

版权

CSS 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

一、定位类型

定位属性 position
属性值
static 默认值静态定位
relative 相对定位
absolute 绝对定位
fixed 固定定位

二、相对定位 relative

相对定位是相对于自身初始位置进行移动的，不会脱离文档流，初始位置存在

<!DOCTYPE html>
<html lang="en">
  <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>Document</title>
    <style>
      div {
        width: 100px;
        height: 100px;
        background: pink;
        position: relative;
        top: 100px;
        left: 200px;
      }
    </style>
  </head>
  <body>
    <div>文本</div>
    你好
  </body>
</html>

在这里插入图片描述

三、绝对定位 absolute

如果父级元素有定位属性的时候就相对于父级元素进行偏移，如果父级元素没有定位属性的时，就会往上级查找直到找到浏览器；脱离文档流，初始位置不存在

<!DOCTYPE html>
<html lang="en">
  <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>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      div {
        width: 300px;
        height: 300px;
        background: pink;
        position: relative;
      }
      p {
        width: 100px;
        height: 100px;
        background: red;
        position: absolute;
        top: 100px;
        left: 50px;
      }
    </style>
  </head>
  <body>
    <div>
      <p>文本</p>
      你好
    </div>
  </body>
</html>

在这里插入图片描述

四、固定定位 fixed

固定定位的参照物是浏览器，脱离文档流的，初始位置不存在

<!DOCTYPE html>
<html lang="en">
  <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>Document</title>
    <style>
      div {
        width: 100px;
        height: 100px;
        background: pink;
        margin: 0 auto;
        position: fixed;
        top: 100px;
      }
    </style>
  </head>
  <body>
    <div>文本</div>
    你好
  </body>
</html>

在这里插入图片描述