程序员书籍笔记 程序员书籍笔记
  • HTML
  • CSS
  • JavaScript
  • 前端知识
  • Vue
  • MarkDown
  • git
  • Node.js
  • Linux
  • 51单片机
  • 四级
  • 第一学期课程
  • 操作系统
  • 计算机网络
  • 数据结构
  • 计算机组成原理
  • HTML5
  • Electron
  • 日记便签
  • 前端导航
GitHub (opens new window)
  • HTML
  • CSS
  • JavaScript
  • 前端知识
  • Vue
  • MarkDown
  • git
  • Node.js
  • Linux
  • 51单片机
  • 四级
  • 第一学期课程
  • 操作系统
  • 计算机网络
  • 数据结构
  • 计算机组成原理
  • HTML5
  • Electron
  • 日记便签
  • 前端导航
GitHub (opens new window)
  • HTML

  • CSS

    • CSS规范
    • 基础
    • 选择器
    • 元素显示
    • 元素背景属性
    • CSS三大特征
    • 盒子模型
    • CSS浮动
    • CSS四种定位
      • css定位
      • 定位组成
        • 定位模式
        • 边偏移
      • 静态定位
      • 相对定位
      • 绝对定位
        • 定位小技巧
      • 定位使用技巧
      • 固定定位
        • 定位小技巧
      • 粘性定位
      • 层叠次序
      • 定位特殊性
    • CSS显示
    • CSS技巧
    • CSS3基础
    • CSS2D转3D
    • 移动端布局
    • 移动端适配
    • 响应式布局
    • CSS的查询属性
  • JavaScript

  • GO

  • 正则表达式

  • java

  • TypeScript

  • react

  • 前端知识

  • jQuery

  • Python

  • C和C++

  • 前端和后端
  • CSS
yuadh
2021-08-24
目录

CSS四种定位

# css定位

标准流或浮动都无法快速实现,需要定位来实现

  1. 浮动可以让多个块级盒子一行没有缝隙排列显示,经常用于横向排列盒子
  2. 定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置,并且可以压住其他盒子

# 定位组成

定位:将盒子定在某一个位置,所以定位也是摆放盒子,按照定位的方式移动盒子

定位 = 定位模式 + 边偏移

定位模式:用于指定一个元素在文档中的定位方式

边偏移:决定了该元素的位置

# 定位模式

position

值 语义
static 静态定位
relative 相对定位
absolute 绝对定位
fixed 固定定位

# 边偏移

边偏移属性 示例 描述
top top: 80px 顶端偏移量,定义元素相对于其父元素上边线的距离
bottom bottom: 80px 底部偏移量,定义元素相对于其父元素下边线的距离
left left: 80px 左侧偏移量,定义元素相对于其父元素左边线的距离
right right: 80px 右侧偏移量,定义元素相对于其父元素右边线的距离

# 静态定位

position: static

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

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

# 相对定位

position: relative

相对定位是元素在移动位置的时候,是相对于它原来的位置来说的

  1. 他是相对于自己原来的位置来移动的
  2. 原来在标准流的位置继续占用,后面的盒子仍然以标准流的方式对待他(不脱标)

# 绝对定位

position: absolute

绝对定位 是元素在移动位置的时候,是相对于祖先元素来说的

  1. **如果没有祖先元素或者祖先元素没有定位,**则以浏览器为准定位 (Document文档)
  2. 如果祖先元素有定位(相对、绝对、固定定位),则以最近一级的有定位祖先元素为参考点移动位置

# 定位小技巧

居中对齐

left : 父级盒子的一半

margin : 元素盒子的一半

# 定位使用技巧

子绝父相

子级是绝对定位的话,父级要用相对定位

  1. 子级绝对定位,不会占有位置,可以放到父盒子里面的任何一个地方,不会影响其它的兄弟盒子
  2. 父盒子需要加定位限制子盒子在父盒子内显示
  3. 父盒子布局时,需要占有位置,因此父亲只能是相对定位

常用在一些实际页面编写中 , 相对定位经常用来作为绝对定位的父级

因为父级需要占有位置,因此是相对定位,子盒子不需要占有位置,则是绝对定位

# 固定定位

position: fixed

固定定位是元素固定浏览器可视区的位置,可以在浏览器页面滚动时元素的位置不变

  1. 以浏览器的可视窗口为参照点移动元素
  2. 固定定位不再占有原先的位置(脱标)

# 定位小技巧

固定在版心右侧位置

  1. 让固定定位的盒子 left: 50% 到版心的一半位置
  2. 让固定定位的盒子 margin-left: length/2 版心宽度的一半

# 粘性定位

position: sticky; top: 0px

粘性定位 相对定位和固定定位的混合

  1. 以浏览器的可视窗口参照移动元素
  2. 粘性定位占有原先的位置
  3. 必需添加 top、left、right、bottom 属性才生效

# 层叠次序

可以使用 z-index 来控制盒子的前后次序

  • 数值可以是正整数、负整数或0 ,默认是auto,数值越大,盒子越靠上
  • 如果属性值相同,则按照书写顺序
  • 数字后面不能加单位
  • 只有定位的盒子才有 x-index属性

# 定位特殊性

  1. 行内元素添加绝对或者固定定位,可以直接设置高度和、宽度
  2. 块级元素添加绝对或固定定位,如果不给宽度或者高度,默认大小是内容的大小

绝对定位会压住盒子内的文字

浮动盒子不会压住文字(作围绕效果)

编辑 (opens new window)
上次更新: 2023/02/07, 14:51:48
CSS浮动
CSS显示

← CSS浮动 CSS显示→

Theme by Vdoing | Copyright © 2021-2023 yuadh
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式
×