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

css5定位

news 2026/2/10 1:29:51

css

  • 一.定位
    • 1.概念（定位=定位模式+边位移）
    • 2.静态位移static（不常用）
    • 3.相对定位relative（不脱标）（占位置）
    • 4.绝对定位absolute（脱标）（不占位置）
    • 5.固定定位fixed（脱标）（不占位置）（一个小算法）
    • 6.粘性定位sticky（不脱标）（占位置）
    • 7.总结
  • 二.子绝父相
  • 三.叠放次序（z-index)(定位的盒子才用）
  • 四.定位拓展
    • 1.绝对定位盒子居中
    • 2.定位的特殊性
    • 3.脱标的盒子不会触动外边距塌陷
    • 4.绝对（固定）定位会压住盒子
  • 五.元素的显示与隐藏
    • 1.display
    • 2.visibility
    • 3.overflow
    • 4.总结
  • 六.网页布局总结

一.定位

1.概念（定位=定位模式+边位移）

why
在这里插入图片描述
定位模式
在这里插入图片描述
边位移
在这里插入图片描述

2.静态位移static（不常用）

相当于标准流，无边位移
在这里插入图片描述

3.相对定位relative（不脱标）（占位置）

在这里插入图片描述

4.绝对定位absolute（脱标）（不占位置）

在这里插入图片描述

5.固定定位fixed（脱标）（不占位置）（一个小算法）

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

6.粘性定位sticky（不脱标）（占位置）

在这里插入图片描述

7.总结

在这里插入图片描述

二.子绝父相

在这里插入图片描述

三.叠放次序（z-index)(定位的盒子才用）

在这里插入图片描述

四.定位拓展

1.绝对定位盒子居中

eg：在这里插入图片描述

在这里插入图片描述

2.定位的特殊性

绝对定位和固定定位和浮动类似
不需要display即可有行内块属性
在这里插入图片描述

3.脱标的盒子不会触动外边距塌陷

浮动的盒子也不会
只有标准流会
在这里插入图片描述

4.绝对（固定）定位会压住盒子

but
浮动不会
在这里插入图片描述

五.元素的显示与隐藏

1.display

在这里插入图片描述

2.visibility

在这里插入图片描述

3.overflow

在这里插入图片描述

4.总结

在这里插入图片描述

六.网页布局总结

在这里插入图片描述

相关文章：

css5定位

css 一.定位1.概念（定位定位模式边位移）2.静态位移static（不常用）3.相对定位relative（不脱标）（占位置）4.绝对定位absolute（脱标）（不占位置&#x…...

编程日记 2024/3/2 0:14:36

【解决】修改 UI界面渲染层级 的常见误区

开发平台：Unity 2021版本   问题描述 Unity 中管理 UI 上显示元素的前后层级关系大致为以下两种方式： 方式一：修改UI元素队列顺序与层级方式二：使用 Canvas 组件中的 Override Sort 属性配置 方式二 对应复杂的 UI 层级关系将常…...

编程日记 2024/3/2 0:13:35

蓝桥杯练习系统（算法训练）ALGO-995 24点

资源限制 内存限制：256.0MB C/C时间限制：1.0s Java时间限制：3.0s Python时间限制：5.0s 问题描述 24点游戏是一个非常有意思的游戏，很流行，玩法很简单：给你4张牌，每张牌上有数…...

编程日记 2024/3/2 0:12:34

汽车电子笔记：BootLoader升级过程疑难问题解决方式（Bootloader响应10 02 + 刷死拯救机制）

目录 1、概述 2、如何在BootLoader响应10 02 2.1、实现流程图 2.2、实现方式（代码思路） 3、刷死拯救机制(100%能救活，适配各类控制器...

编程日记 2024/3/2 0:03:26

高级RAG：揭秘PDF解析

原文地址：https://pub.towardsai.net/advanced-rag-02-unveiling-pdf-parsing-b84ae866344e 2024 年 2 月 3 日 附加内容：揭秘PDF解析：如何从科学pdf论文中提取公式 对于RAG，从文档中提取信息是一个不可避免的场景。确保从源头…...

编程日记 2024/3/2 0:00:23

Android之UI Automator框架源码分析（第九篇：UiDevice获取UiAutomation对象的过程分析）

前言 学习UiDevice对象，就需要看它的构造方法，构造方法中有UiDevice对象持有一些对象，每个对象都是我们分析程序的重点，毕竟UiDevice对象的功能，依赖这些组合的对象 备注：当前对象持有的对象，初…...

编程日记 2024/3/1 23:58:21

【C语言】指针初阶2.0版本

这篇博文我们来继续学习指针的其他内容 指针2.0 传值调用与传址调用传值调用传址调用 一维数组与指针理解数组名使用指针深入理解一维数组 二级指针指针数组二维数组与指针 传值调用与传址调用 在开始之前，我们需要先了解这个概念，后面才能够正常的学习…...

编程日记 2024/3/1 23:57:20

小红书关键词爬虫

标题 1 统计要收集的关键词，制作一个文件夹2 爬取每一页的内容3 爬取标题和内容4 如果内容可以被查看，爬取评论内容5 将结果进行汇总，并且每个帖子保存为一个json文件，具体内容6 总结 1 统计要收集的关键词，制作一个文…...

编程日记 2024/3/1 23:56:18

网络爬虫的危害，如何有效的防止非法利用

近年来，不法分子利用“爬虫”软件收集公民隐私数据案件屡见不鲜。2023年8月23日，北京市高级人民法院召开北京法院侵犯公民个人信息犯罪案件审判情况新闻通报会，通报侵犯公民个人隐私信息案件审判情况，并发布典型案例。在这些典型案…...

编程日记 2024/3/1 23:55:17

2024/2/29 备战蓝桥杯 6-1 二分

目录 查找 【深基13.例1】查找 - 洛谷 数对 A-B 数对 - 洛谷 砍树 [COCI 2011/2012 #5] EKO / 砍树 - 洛谷 参考连接：AcWing 789. 数的范围---二分法一次搞懂 - AcWing 1.程序中不要同时出现l mid, r mdi这两条语句。 2.如过程序中出现了l mid&#xff0…...

编程日记 2024/3/1 23:54:16

浅析ARMv8体系结构：原子操作

文章目录 概述LL/SC机制独占内存访问指令多字节独占内存访问指令 独占监视器经典自旋锁实现 LSE机制原子内存操作指令CAS指令交换指令 相关参考 概述 在编程中，当多个处理器或线程访问共享数据，并且至少有一个正在写入时，操作必须是原子的&a…...

编程日记 2024/3/1 23:53:15

综合练习(二)

目录 列出薪金比 SMITH 或 ALLEN 多的所有员工的编号、姓名、部门名称、领导姓名、部门人数，以及所在部门的平均工资、最高和最低工资 补充 spool Oracle从入门到总裁:https://blog.csdn.net/weixin_67859959/article/details/135209645 列出薪金比 SMITH 或 AL…...

编程日记 2024/3/1 23:52:14

sql-labs第46关（order by盲注脚本）

一、环境 网上有自己找 二、解释 order by 注入我们看他的true和false来进行注入出来 二、实操 让我们用sort 看看源码 最终我们的id是放到order by后面了 如果我们直接用列去排序 ?sortusername/password username： password： 可以看到顺序是不…...

编程日记 2024/3/1 23:50:13

13款可以轻松上手画图软件推荐

在当今的数字世界里，我们有各种各样的创作工具，尤其是画图软件。所以问题来了：我们应该如何选择许多免费的绘画软件？为了回答这个问题，我们将在本文中分享10个领先的画图软件。每一个都有其独特的特点和优势&#xff0…...

编程日记 2024/3/1 23:47:10

vue实现商品评分效果（通过插件实现）

Vue.js 实现了一个简单的商品评分功能。用户可以通过点击星星来修改商品的评分&#xff0c;并且评分显示了相应的星星数。 废话不多说&#xff0c;直接上代码 方法一&#xff1a; <template><div><avue-form :model"formData"><avue-form-it…...

编程日记 2024/3/1 23:44:08

SpringBoot 手写 Starter

spring-boot-starter 模块 1.介绍 SpringBoot中的starter是一种非常重要的机制&#xff0c;能够抛弃以前繁杂的配置&#xff0c;将其统一集成进starter&#xff0c;应用者只需要在maven中引入starter依赖&#xff0c;SpringBoot就能自动扫描到要加载的信息并启动相应的默认配…...

编程日记 2024/3/1 23:42:06

C++ 学习笔记（Structured bindings）

C 学习笔记&#xff08;Structured bindings&#xff09; 这个特性是 C17 引入的&#xff0c;个人认为主要是解决如何让函数返回多个值的问题。在这之前&#xff0c;我们一般用 std::pair 或者 std::tuple 来返回多个值。比如下面的例子&#xff1a; std::tuple<int, int …...

编程日记 2024/3/1 23:41:05

K8S常用kubectl命令汇总（持续更新中）

天行健&#xff0c;君子以自强不息&#xff1b;地势坤&#xff0c;君子以厚德载物。 每个人都有惰性&#xff0c;但不断学习是好好生活的根本&#xff0c;共勉&#xff01; 文章均为学习整理笔记&#xff0c;分享记录为主&#xff0c;如有错误请指正&#xff0c;共同学习进步。…...

编程日记 2024/3/1 23:40:04

加密和签名的区别及应用场景

原文网址&#xff1a;加密和签名的区别及应用场景_IT利刃出鞘的博客-CSDN博客 简介 本文介绍加密和签名的区别及应用场景。 RSA是一种非对称加密算法&#xff0c; 可生成一对密钥&#xff08;私钥和公钥&#xff09;。&#xff08;RSA可以同时支持加密和签名&#xff09;。 …...

编程日记 2024/3/1 23:36:01

双非二本找实习前的准备day3

学习目标&#xff1a; 每天2-3到简单sql&#xff08;刷完即止&#xff09;&#xff0c;每天复习代码随想录上的题目3道算法&#xff08;时间充足可以继续&#xff09;&#xff0c;背诵的八股的问题也在这里记录了 今日碎碎念&#xff1a; 1&#xff09;偶尔还是贪玩游戏&…...

编程日记 2024/3/1 23:35:00

网络编程（Modbus进阶）

思维导图 Modbus RTU&#xff08;先学一点理论&#xff09; 概念 Modbus RTU 是工业自动化领域 最广泛应用的串行通信协议&#xff0c;由 Modicon 公司&#xff08;现施耐德电气&#xff09;于 1979 年推出。它以 高效率、强健性、易实现的特点成为工业控制系统的通信标准。 包…...

编程新知 2026/2/9 2:42:51

React Native 开发环境搭建（全平台详解）

React Native 开发环境搭建&#xff08;全平台详解&#xff09; 在开始使用 React Native 开发移动应用之前&#xff0c;正确设置开发环境是至关重要的一步。本文将为你提供一份全面的指南&#xff0c;涵盖 macOS 和 Windows 平台的配置步骤&#xff0c;如何在 Android 和 iOS…...

编程新知 2025/10/7 2:47:54

安宝特方案丨XRSOP人员作业标准化管理平台：AR智慧点检验收套件

在选煤厂、化工厂、钢铁厂等过程生产型企业&#xff0c;其生产设备的运行效率和非计划停机对工业制造效益有较大影响。 随着企业自动化和智能化建设的推进&#xff0c;需提前预防假检、错检、漏检&#xff0c;推动智慧生产运维系统数据的流动和现场赋能应用。同时&#xff0c;…...

编程新知 2026/2/5 17:57:20

2021-03-15 iview一些问题

1.iview 在使用tree组件时&#xff0c;发现没有set类的方法&#xff0c;只有get&#xff0c;那么要改变tree值&#xff0c;只能遍历treeData&#xff0c;递归修改treeData的checked&#xff0c;发现无法更改&#xff0c;原因在于check模式下&#xff0c;子元素的勾选状态跟父节…...

编程新知 2026/2/5 3:29:13

【Web 进阶篇】优雅的接口设计：统一响应、全局异常处理与参数校验

系列回顾&#xff1a; 在上一篇中&#xff0c;我们成功地为应用集成了数据库&#xff0c;并使用 Spring Data JPA 实现了基本的 CRUD API。我们的应用现在能“记忆”数据了&#xff01;但是&#xff0c;如果你仔细审视那些 API&#xff0c;会发现它们还很“粗糙”&#xff1a;有…...

编程新知 2026/1/22 20:46:43

Android Bitmap治理全解析：从加载优化到泄漏防控的全生命周期管理

引言 Bitmap&#xff08;位图&#xff09;是Android应用内存占用的“头号杀手”。一张1080P&#xff08;1920x1080&#xff09;的图片以ARGB_8888格式加载时&#xff0c;内存占用高达8MB&#xff08;192010804字节&#xff09;。据统计&#xff0c;超过60%的应用OOM崩溃与Bitm…...

编程新知 2026/1/8 22:17:14

Maven 概述、安装、配置、仓库、私服详解

目录 1、Maven 概述 1.1 Maven 的定义 1.2 Maven 解决的问题 1.3 Maven 的核心特性与优势 2、Maven 安装 2.1 下载 Maven 2.2 安装配置 Maven 2.3 测试安装 2.4 修改 Maven 本地仓库的默认路径 3、Maven 配置 3.1 配置本地仓库 3.2 配置 JDK 3.3 IDEA 配置本地 Ma…...

编程新知 2026/2/8 1:58:01

Unity | AmplifyShaderEditor插件基础（第七集：平面波动shader）

目录 一、&#x1f44b;&#x1f3fb;前言 二、&#x1f608;sinx波动的基本原理 三、&#x1f608;波动起来 1.sinx节点介绍 2.vertexPosition 3.集成Vector3 a.节点Append b.连起来 4.波动起来 a.波动的原理 b.时间节点 c.sinx的处理 四、&#x1f30a;波动优化…...

编程新知 2026/2/6 22:55:12

GitHub 趋势日报 (2025年06月06日)

&#x1f4ca; 由 TrendForge 系统生成 | &#x1f310; https://trendforge.devlive.org/ &#x1f310; 本日报中的项目描述已自动翻译为中文 &#x1f4c8; 今日获星趋势图 今日获星趋势图 590 cognee 551 onlook 399 project-based-learning 348 build-your-own-x 320 ne…...

编程新知 2026/1/29 5:21:31

Vite中定义@软链接

在webpack中可以直接通过符号表示src路径&#xff0c;但是vite中默认不可以。 如何实现&#xff1a; vite中提供了resolve.alias&#xff1a;通过别名在指向一个具体的路径 在vite.config.js中 import { join } from pathexport default defineConfig({plugins: [vue()],//…...

编程新知 2026/1/24 13:26:57