当前位置： 首页 > news >正文

【10.HTML入门知识-CSS元素定位】

news 2025/8/19 2:35:43

1 标准流（Normal Flow）

默认情况下，元素都是按照normal flow（标准流、常规流、正常流、文档流【document flow】）进行排布
从左到右、从上到下按顺序摆放好
 默认情况下，互相之间不存在层叠现象

1.1 margin-padding位置调整

在这里插入图片描述

1.1 画布 和 视口

在这里插入图片描述

2 认识position属性

除了static,其他定位属性都会脱标(自定义位置)
在这里插入图片描述

position值对比

在这里插入图片描述

2.1 静态定位 - static

会占据标准布局空间

在这里插入图片描述

2.2 相对定位 - relative

会占据标准布局空间
在这里插入图片描述

2.3 固定定位 - fixed

不会占据标准布局空间
在这里插入图片描述

2.4 绝对定位 - absolute

不会占据标准布局空间
在这里插入图片描述

2.5 子绝父相

在这里插入图片描述

2.6 将position设置为absolute/fixed元素的特点

在这里插入图片描述
在这里插入图片描述

2.7.粘性定位 - sticky

在这里插入图片描述
在这里插入图片描述

3 层叠 CSS属性 - z-index

在这里插入图片描述

http://www.lryc.cn/news/63798.html

相关文章：

  • LeetCode_贪心算法_简单_455.分发饼干
  • HashMap
  • 数据结构初阶 —— 树（堆）
  • 一文看懂低代码，5分钟从入门到原理全搞定
  • MetaERP系统主要干什么的，华为自研ERP的路子是否可以效仿？
  • 自动驾驶——离散LQR的黎卡提方程Riccati公式推导与LQR工程化
  • 28.Mybatis的入门
  • Android Jetpack 从使用到源码深耕【ViewModel从实践到原理 】（三）
  • 什么性格的人适合报考环境科学类专业？高考选专业
  • Python中的异常处理机制可以帮助程序员在程序运行过程中遇到错误时进行处理
  • TCP之报文格式解析
  • qemu-基础篇(二)——裸机 arm 程序环境搭建
  • JSP+SQL基于JSP的学生信息管理系统(源代码+论文+答辩PPT)
  • docker上部署程序后无法连接数据库的问题
  • Ucore lab4
  • AI失业潮来袭，某些部门裁员过半
  • git 撤销add/commit，以及更换源命令
  • 3dMax需要什么样的硬件环境才能更好的工作？
  • python-使用Qchart总结4-绘制多层柱状图
  • Java学习笔记-02
  • 中通快递财报预测：中通快递2023年收入和利润将大幅下降
  • Javaweb | 状态管理：Session、Cookie
  • Redux
  • Nacos配置中心的详解与搭建
  • Java入门教程｜｜Java 封装｜｜Java 接口
  • 微软开源AI修图工具让老照片重现生机
  • 什么是 Docker？它能用来做什么？
  • 生成器的创建方式（py编程）
  • 百胜中国：未来将实现强劲增长
  • 【Celery】任务Failure或一直超时Pending