position有哪些值?分别是根据什么定位的?

CSS的position属性有五个值,它们分别是:static、relative、absolute、fixed和sticky。

static:这是默认值,元素按照正常的文档流进行定位。

relative:元素按照正常的文档流进行定位,然后相对于其原始位置进行偏移。

absolute:元素脱离文档流,并相对于最近的已定位祖先元素(而非通常的块父元素)进行定位。如果没有已定位的祖先元素,那么它将相对于初始包含块进行定位。

fixed:元素脱离文档流,并相对于浏览器窗口进行定位,即使页面滚动,它也不会移动。

sticky:这是一种混合类型,元素在滚动范围内表现为相对定位,而在滚动范围外表现为固定定位。

请注意,每种定位类型都有其特定的用途和行为,选择使用哪种定位类型取决于你的布局需求。

以下是一个使用不同position值的例子:
<!DOCTYPE html>
<html>
<head>
  <style>
    .relative {
      position: relative;
      top: 20px;
      left: 20px;
    }

    .absolute {
      position: absolute;
      top: 50px;
      left: 50px;
    }

    .fixed {
      position: fixed;
      top: 100px;
      left: 100px;
    }
  </style>
</head>
<body>
  <div class="relative">我是相对定位的元素。</div>
  <div class="absolute">我是绝对定位的元素。</div>
  <div class="fixed">我是固定定位的元素。</div>
</body>
</html>

 

 

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-01-18 09:02:01       94 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-01-18 09:02:01       100 阅读
  3. 在Django里面运行非项目文件

    2024-01-18 09:02:01       82 阅读
  4. Python语言-面向对象

    2024-01-18 09:02:01       91 阅读

热门阅读

  1. WebSocket的进阶理解

    2024-01-18 09:02:01       54 阅读
  2. win/ubuntu/mac 卸载 安装 docker 命令

    2024-01-18 09:02:01       59 阅读
  3. 代码随想录算法训练营29期Day20|LeetCode 654,617,700,98

    2024-01-18 09:02:01       58 阅读
  4. Django笔记(三):路由urls

    2024-01-18 09:02:01       47 阅读
  5. FFmpeg简单总结

    2024-01-18 09:02:01       49 阅读
  6. 8个Linux软件包管理命令

    2024-01-18 09:02:01       46 阅读
  7. 2、机器学习基础数据探索

    2024-01-18 09:02:01       51 阅读
  8. Vue中的keep-alive缓存组件的理解

    2024-01-18 09:02:01       53 阅读
  9. 如何有效清理您的Python环境:清除Pip缓存

    2024-01-18 09:02:01       48 阅读
  10. 2024成都线路板展览会|全国线路板展

    2024-01-18 09:02:01       42 阅读