CSS(五):定位
目录
相对定位
绝对定位
固定定位
在 CSS 中,position 属性用于控制元素的定位方式,使我们可以精确地控制元素在页面上的位置。定位分为相对定位、绝对定位、和固定定位
相对定位
相对定位:position: relative;
相对定位意味着元素的位置相对于它在正常文档流中的原始位置进行偏移。也就是说,元素在文档流中仍然占据原来的空间,但通过 top、left、right 和 bottom 属性,使元素相对当前位置进行调整
<div class="relative-box">相对定位的盒子</div><style>.relative-box {position: relative;top: 20px; /* 下移20px */left: 30px; /* 右移30px */background-color: lightblue;padding: 20px;width: 200px;height: 100px;}
</style>
在上面的例子中,.relative-box 元素将比原始位置下移 20px,右移 30px,原来的位置依然保留,但它在页面上的实际显示位置已发生变化
绝对定位
绝对定位 :position: absolute
元素的位置相对于其最近的已定位父元素进行定位。
已定位指的是父元素设置了 position 属性值为 relative、absolute、fixed 或 sticky。
如果没有这样的父元素,元素会相对于 html 标签(即浏览器窗口)定位
注意,绝对定位的元素会脱离文档流,不再占据空间,其他元素会填充其原来的位置,原来的位置不会被保留,常用于弹窗等
<div class="parent"><div class="absolute-box">绝对定位的盒子</div>
</div><style>.parent {position: relative; /* 父元素设置定位 */width: 300px;height: 200px;background-color: lightgray;}.absolute-box {position: absolute;top: 50px;left: 100px;width: 100px;height: 50px;background-color: lightcoral;}
</style>
在这个例子中,.absolute-box 元素相对于 .parent 元素进行绝对定位,top: 50px 和 left: 100px 表示 .absolute-box 会距离 .parent 元素的顶部 50px,距离左边 100px
固定定位
元素的位置相对于浏览器窗口固定,不论页面滚动到哪里,元素都会保持在窗口的固定位置
注意,固定定位的元素也会脱离文档流,不占据空间,常用于固定导航栏、浮动按钮等
<div class="fixed-box">固定定位的盒子</div><style>.fixed-box {position: fixed;top: 10px;right: 10px;background-color: lightgreen;padding: 20px;width: 150px;height: 100px;}
</style>
在这个例子中,.fixed-box 元素会固定在浏览器窗口的右上角,即使页面滚动,它的位置不会发生改变
相关文章:
CSS(五):定位
目录 相对定位 绝对定位 固定定位 在 CSS 中,position 属性用于控制元素的定位方式,使我们可以精确地控制元素在页面上的位置。定位分为相对定位、绝对定位、和固定定位 相对定位 相对定位:position: relative; 相对定位意味着元素的位置…...
JSON 系列之2:JSON简单查询
本文为Oracle数据库JSON学习系列的第2篇,讲述如何对存储在数据库中的JSON文档进行简单的查询。 创建测试表,插入2条数据: DROP TABLE colortab PURGE;CREATE TABLE colortab (id NUMBER,color VARCHAR2(4000),CONSTRAINT ensure_json CH…...
SQL 简单查询
目录 一、投影查询 1、指定特定列查询 2、修改返回列名查询 3、计算值查询 二、选择查询 1、使用关系表达式 2、使用逻辑表达式 3、使用 BETWEEN关键字 4、使用 IN关键字 5、使用 LIKE关键字 6、使用 IS NULL/ NOT NULL关键字 7、符合条件查询 三、聚合函数查询 一…...
YOLOv9-0.1部分代码阅读笔记-metrics.py
metrics.py utils\metrics.py 目录 metrics.py 1.所需的库和模块 2.def fitness(x): 3.def smooth(y, f0.05): 4.def ap_per_class(tp, conf, pred_cls, target_cls, plotFalse, save_dir., names(), eps1e-16, prefix""): 5.def compute_ap(recall, prec…...
KaiOS 4.0 | DataCall and setupData implemention
相关文档 1、KaiOS 3.1 系统介绍 KaiOS 系统框架和应用结构(APP界面逻辑)文章浏览阅读842次,点赞17次,收藏5次。对于Java开发者而言,理解JS的逻辑调用是有点困难的。而KaiOS webapp开发又不同于现代的web开发,更像chrome浏览器内嵌模式。在这里梳理一下kaios平台web应用…...
nginx-rtmp服务器搭建
音视频服务器搭建 本文采用 nginx/1.18.0和nginx-rtmp-module模块源代码搭建RTMP流媒体服务器 流程 查看当前服务器的nginx版本下载nginx和nginx-rtmp-module源代码重新编译nginx,并进行相关配置(nginx.conf、防火墙等)客户端测试连接测试搭…...
[c++进阶(三)]单例模式及特殊类的设计
1.前言 在实际场景中,总会遇见一些特殊情况,比如设计一个类,只能在堆上开辟空间, 或者是设计一个类只能实例化一个对象。那么我们应该如何编写代码呢?本篇将会详细的介绍 本章重点: 本篇文章着重讲解如何设计一些特殊 的类,包括不能被拷贝,只能在栈/堆上…...
企业内训|高智能数据构建和多模态数据处理、Agent研发及AI测评技术内训-吉林省某汽车厂商
吉林省某汽车厂商为提升员工在AI大模型技术方面的知识和实践能力,举办本次为期8天的综合培训课程。本课程涵盖“高智能数据构建与智驾云多模态数据处理”、“AI Agent的研发”和“大模型测评”三大模块。通过系统梳理从非结构化数据的高效标注与融合,到L…...
009 Qt_显示类控件_QLCDNumber、ProgressBar、Calendar
文章目录 前言LCD NumberProgressBarCalendar Widget 小结 前言 本文将会向你介绍显示类控件中QLCDNumber显示数字、ProgressBar进度条、Calendar日历 LCD Number QLCDNumer 是⼀个专门用来显示数字的控件. 类似于 “老式计算器” 的效果. 属性说明intValueQLCDNumber 显示…...
--spring.profiles.active=prod
rootproduct-qualification:~# ps -ef | grep java root 5110 1 3 16:57 ? 00:00:54 java -jar productQualification.jar --spring.profiles.activeprod root 6476 5797 0 17:26 pts/0 00:00:00 grep --colorauto java好的,你使用 ps …...
深入解析JVM中对象的创建过程
1. 引言 对象是面向对象编程的核心概念之一,它们封装了数据和行为,构成了应用程序的基本构建块。然而,在Java语言中,每当使用new关键字或其他方式创建一个新对象时,背后发生了什么?这个问题的答案隐藏在JV…...
使用开源在线聊天工具Fiora轻松搭建个性化聊天平台在线交流
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家:人工智能教程 文章目录 前言1.关于Fiora2.安装Docker3.本地部署Fiora4.使用Fiora5.cpolar内网穿透工具安装6.创建远程连接公网地址7.固定Uptime …...
ffmpeg之显示一个yuv照片
显示YUV图片的步骤 1.初始化SDL库 目的:确保SDL库正确初始化,以便可以使用其窗口、渲染和事件处理功能。操作:调用 SDL_Init(SDL_INIT_VIDEO) 来初始化SDL的视频子系统。 2.创建窗口用于显示YUV图像: 目的:创建一个…...
MySQL中Performance Schema库的详解(下)
昨天说了关于SQL语句相关的,今天来说说性能相关的,如果没有看过上篇请点传送门https://blog.csdn.net/2301_80479959/article/details/144693574?fromshareblogdetail&sharetypeblogdetail&sharerId144693574&sharereferPC&sharesource…...
【Rust自学】7.1. Package、Crate和定义Module
喜欢的话别忘了点赞、收藏加关注哦,对接下来的教程有兴趣的可以关注专栏。谢谢喵!(・ω・) 7.1.1. Rust的代码组织 代码组织主要包括: 那些细节可以对外暴露,而哪些细节是私有的在作用域内哪些名称有效… …...
【Git】-- 版本说明
Alpha:是内部测试版,一般不向外部发布,会有很多 Bug .一般只有测试人员使用。Beta:也是测试版,这个阶段的版本会一直加入新的功能。在 Alpha 版之后推出。RC:(Release Candidate) 顾名思义么 ! 用在软件上就是候选版本。系统平台…...
1919C. Grouping Increases
问题描述 序列 X X X,划分成两个字序列 A , B A,B A,B,其中惩罚是 A , B A,B A,B之中, A [ i ] < A [ i 1 ] , B [ i ] < B [ i 1 ] A[i] < A[i1], B[i] < B[i1] A[i]<A[i1],B[i]<B[i1]的个数 思路 拆分 X X X…...
Pion WebRTC 项目教程
Pion WebRTC 项目教程 webrtc Pure Go implementation of the WebRTC API [这里是图片001] 项目地址: https://gitcode.com/gh_mirrors/we/webrtc 1. 项目目录结构及介绍 Pion WebRTC 项目的目录结构如下: pion/webrtc ├── api ├── examples ├── inter…...
【安全编码】Web平台如何设计防止重放攻击
我们先来做一道关于防重放的题,答案在文末 防止重放攻击最有效的方法是( )。 A.对用户密码进行加密存储使用 B.使用一次一密的加密方式 C.强制用户经常修改用户密码 D.强制用户设置复杂度高的密码 如果这道题目自己拿不准,或者…...
VUE3+django接口自动化部署平台部署说明文档(使用说明,需要私信)
网址连接:http://118.25.110.213:5200/#/login 账号/密码:renxiaoyong 1、VUE3部署本地。 1.1本地安装部署node.js 1.2安装vue脚手架 npm install -g vue/cli # 或者 yarn global add vue/cli1.3创建本地项目 vue create my-vue-project1.4安装依赖和插…...
XCTF-web-easyupload
试了试php,php7,pht,phtml等,都没有用 尝试.user.ini 抓包修改将.user.ini修改为jpg图片 在上传一个123.jpg 用蚁剑连接,得到flag...
日语AI面试高效通关秘籍:专业解读与青柚面试智能助攻
在如今就业市场竞争日益激烈的背景下,越来越多的求职者将目光投向了日本及中日双语岗位。但是,一场日语面试往往让许多人感到步履维艰。你是否也曾因为面试官抛出的“刁钻问题”而心生畏惧?面对生疏的日语交流环境,即便提前恶补了…...
Cesium1.95中高性能加载1500个点
一、基本方式: 图标使用.png比.svg性能要好 <template><div id"cesiumContainer"></div><div class"toolbar"><button id"resetButton">重新生成点</button><span id"countDisplay&qu…...
聊聊 Pulsar:Producer 源码解析
一、前言 Apache Pulsar 是一个企业级的开源分布式消息传递平台,以其高性能、可扩展性和存储计算分离架构在消息队列和流处理领域独树一帜。在 Pulsar 的核心架构中,Producer(生产者) 是连接客户端应用与消息队列的第一步。生产者…...
【单片机期末】单片机系统设计
主要内容:系统状态机,系统时基,系统需求分析,系统构建,系统状态流图 一、题目要求 二、绘制系统状态流图 题目:根据上述描述绘制系统状态流图,注明状态转移条件及方向。 三、利用定时器产生时…...
Springcloud:Eureka 高可用集群搭建实战(服务注册与发现的底层原理与避坑指南)
引言:为什么 Eureka 依然是存量系统的核心? 尽管 Nacos 等新注册中心崛起,但金融、电力等保守行业仍有大量系统运行在 Eureka 上。理解其高可用设计与自我保护机制,是保障分布式系统稳定的必修课。本文将手把手带你搭建生产级 Eur…...
C++.OpenGL (10/64)基础光照(Basic Lighting)
基础光照(Basic Lighting) 冯氏光照模型(Phong Lighting Model) #mermaid-svg-GLdskXwWINxNGHso {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-GLdskXwWINxNGHso .error-icon{fill:#552222;}#mermaid-svg-GLd…...
【python异步多线程】异步多线程爬虫代码示例
claude生成的python多线程、异步代码示例,模拟20个网页的爬取,每个网页假设要0.5-2秒完成。 代码 Python多线程爬虫教程 核心概念 多线程:允许程序同时执行多个任务,提高IO密集型任务(如网络请求)的效率…...
根目录0xa0属性对应的Ntfs!_SCB中的FileObject是什么时候被建立的----NTFS源代码分析--重要
根目录0xa0属性对应的Ntfs!_SCB中的FileObject是什么时候被建立的 第一部分: 0: kd> g Breakpoint 9 hit Ntfs!ReadIndexBuffer: f7173886 55 push ebp 0: kd> kc # 00 Ntfs!ReadIndexBuffer 01 Ntfs!FindFirstIndexEntry 02 Ntfs!NtfsUpda…...
鸿蒙(HarmonyOS5)实现跳一跳小游戏
下面我将介绍如何使用鸿蒙的ArkUI框架,实现一个简单的跳一跳小游戏。 1. 项目结构 src/main/ets/ ├── MainAbility │ ├── pages │ │ ├── Index.ets // 主页面 │ │ └── GamePage.ets // 游戏页面 │ └── model │ …...
