Blog
首页
文档
收藏
关于
  • 在线转换时间戳 (opens new window)
  • 在线压缩图片 (opens new window)
  • Float-Double转二进制 (opens new window)
  • 文件转Hex字符串 (opens new window)

HiuZing

🍑
首页
文档
收藏
关于
  • 在线转换时间戳 (opens new window)
  • 在线压缩图片 (opens new window)
  • Float-Double转二进制 (opens new window)
  • 文件转Hex字符串 (opens new window)
  • 前端面试题

  • JavaScript

  • Vue2

  • port

  • CSS

    • flex

    • Scss

    • CSS常见问题

      • CSS行内块之间的缝隙
      • CSS命名规范
      • CSS实现单行、多行文本溢出隐藏
      • CSS工具
      • CSS宽高比
      • CSS图片之间的缝隙
      • CSS渐变边框
      • CSS样式-动态绑定
      • CSS样式穿透
      • CSS实现两栏布局
      • CSS实现三栏布局
      • CSS实现双飞翼(圣杯)布局
      • CSS实现水平垂直居中
      • CSS-BFC
      • CSS-Position
        • CSS-Position
          • 静态定位
          • 绝对定位
          • 相对定位
          • 固定定位
      • CSS-定义使用变量
      • CSS-display
      • CSS-盒模型
      • transform
      • Animate.css
    • less

  • Node.js

  • JavaScript优化

  • uniapp

  • Mini Program

  • TypeScript

  • 面向对象编程

  • UI组件

  • Plugin

  • Vue3

  • 性能优化

  • Axios

  • 状态管理

  • React

  • Mock

  • Icon

  • Template

  • 构建工具

  • 项目规范配置

  • Taro

  • SVG

  • React Native

  • 前端
  • CSS
  • CSS常见问题
HiuZing
2022-11-09
目录

CSS-Position

# CSS-Position

# 静态定位

static 默认值不脱离文档流,top,right,bottom,left 等属性不生效

# 绝对定位

absolute 绝对定位的关键是找对参照物,找到最近的一级带有带定位的父级元素进行位置移动如果找不到,那么相对于浏览器窗口进行定位

设置了 position:absolute;属性后,元素会脱离正常文档流,不在占据空间;

左右 margin 为 auto 将会失效;

通过 left、top、bottom、right 来决定元素位置

# 相对定位

relative 参照物:元素偏移前位置

设置了相对定位,左右 margin 为 auto 仍然有效、并且不会脱离文档流。

# 固定定位

fixed 参照物:浏览器窗口;

固定定位会脱离文档流;

当绝对定位和固定定位参照物都是浏览器窗口时的区别: 当出现滚动条时,固定定位的元素不会跟随滚动条滚动,绝对定位会跟随滚动条滚动

上次更新: 2024/08/14, 04:14:33
CSS-BFC
CSS-定义使用变量

← CSS-BFC CSS-定义使用变量→

最近更新
01
React Native 使用SVG
08-13
02
Docker基础命令
08-04
03
算数逻辑单元
07-30
更多文章>
Theme by Vdoing | Copyright © 2021-2024 WeiXiaojing | 友情链接
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式