CSS定位


定位的组成:

这个属性只有当position属性设置为absolute、fixed、relative时才有效。而且在position属性取值不同时,它们的含义也不同。left和right属性值除了可以设置为绝对的像素数外,还可以设置百分数。

定位模式:

静态定位static(了解):

相对定位relative(重点):

不脱标。

它是相对于自己原来的位置来移动的(移动位置的时候参照点是自己原来的位置)

原来在标准流的位置继续占有,后面的盒子仍然以标准流的方式对待它。(不脱标,继续保留原来位置)

绝对定位absolute(重要) :

脱标。(优势)

如果祖先元素有定位(相对,绝对,固定定位),则以最近一级的有定位祖先元素为参考点移动位置。

绝对定位使能水平居中的方式:

子绝父相:相对定位与绝对定位

固定定位fixed(重要):

特点:是按照浏览器可视窗口参照的。

固定到以版心为边界的位置:

关键在于盒子关系为兄弟类

粘性定位(了解):


定位的叠放次序(z-index):

z指z轴。

定位的特殊特性(拓展):




本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/661009.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

易语言系列学习1

通过本文章你会学习到 如果 如果真 获取编辑框内容 关闭本程序 监听按键让它等价于点击某个按钮 运算:或 且 非(注意中间要有一个空格,否则会报错) 效果 .版本 2.程序集 窗口程序集_启动窗口.子程序 _按钮2_被单击. 如果真 (编…

QT生成二维码

文章目录 1.基于第三方库libqrencode,Qt本地生成二维码1.1.效果图1.2.QR码简介1.3.第三方库libqrencode下载1.4.在自己的项目中使用,这里提供一个例子1.4.1.新建一个工程1.4.2.加入第三方库libqrencode1.4.3.qrencode.pri1.4.4.使用1.4.5.centos7下编译运行1.4.6.Windows下编译…

【项目实践02】【优先级阻塞队列】

文章目录 一、前言二、项目背景三、实现方案四、思路延伸1. 优先级队列1.1 concurrent 包下的 PriorityBlockingQueue1.2 Redisson 的优先级阻塞队列 2. jvisualvm 远程连接3. Jstack 高 CPU 排查 五、参考内容 一、前言 本系列用来记录一些在实际项目中的小东西,并…

qemu 抓取linux kernel vmcore

一、背景 在qemu调试linux kernel时 有时我们会遇到dump 情况,这时可以通过gdb 方式连接分析dump, 但实际中我们用得更多的是离线dump 分析,分析的文件通常是vmcore(linux kernel panic 生成的coredump文件)或者ramdu…

【多个SpringBoot模块项目如何变成聚合项目】

【前言】 项目虽然是Eureka、OpenFeign 进行服务注册和服务调用,但是每个模块都是一个单独的SpringBoot,启动每个模块都需要单独启动一个idea,觉得这个过于繁琐,现在想把项目变成一个聚合项目,只需要启动一个idea即可。 【过程】…

Mybatis批量增删改查

1.批量新增 mapper层&#xff1a; Integer batchAdd(Param("list")List<UserEntity> userEntity); xml&#xff1a; <insert id"batchAdd" parameterType"java.util.List">INSERT INTO 表名(name, age, gender, psw, seq) value…

Spring相关框架中的bean及其实例化

目录 一、什么是实例化 二、Spring中的依赖注入 三、Bean的生命周期 四、Spring容器及作用 五、在Spring Boot中如何使用容器 一、什么是实例化 在 Spring 框架中&#xff0c;实例化通常是指创建一个对象的过程。具体来说&#xff0c;当你在 Spring 中配置一个 Bean&…

QTimer 指针类型和引用类型使用的区别

QTimer *timer1 new QTimer(this); //指针类型 QTimer timer2; //引用类型 这两种用法之间的主要区别在于对象的生命周期和存储位置。 1、动态分配内存的对象*timer1 &#xff1a; QTimer在创建为 *timer1 指针类型时&#xff0c;一定要指定this为父类&#xff0c;即父类为…

【数据结构 08】红黑树

一、概述 红黑树&#xff0c;是一种二叉搜索树&#xff0c;每一个节点上有一个存储位表示节点的颜色&#xff0c;可以是Red或Black。 通过对任何一条从根到叶子的路径上各个节点着色方式的限制&#xff0c;红黑树确保没有一条路径会比其他路径长上两倍&#xff0c;因而是接进…

CMake官方教程中文翻译 Step 9: Packaging an Installer

鉴于自己破烂的英语&#xff0c;所以把cmake的官方文档用 谷歌翻译 翻译下来方便查看。 英语好的同学建议直接去看cmake官方文档&#xff08;英文&#xff09;学习&#xff1a;地址 点这里 或复制&#xff1a;https://cmake.org/cmake/help/latest/guide/tutorial/index.html …

UGUI中Text和TextMeshPro实现图文混排方式

一些项目中实现图文混排是自定义一个脚本去继承Text类&#xff0c;然后文本中用富文本的方式进行图片和超链接的定义&#xff0c;在代码中用正则表达式匹配的方式把文本中图片和超链接给替换&#xff0c;如下&#xff1a; TextMeshPro实现是生成SpriteAsset进行图文混排的&…

YOLOv8-Segment C++

YOLOv8-Segment C https://github.com/triple-Mu/YOLOv8-TensorRT 这张图像是运行yolov8-seg程序得到的结果图&#xff0c;首先是检测到了person、bus及skateboard(这个是检测错误&#xff0c;将鞋及其影子检测成了滑板&#xff0c;偶尔存在错误也属正常)&#xff0c;然后用方…

C++从零开始的打怪升级之路(day24)

这是关于一个普通双非本科大一学生的C的学习记录贴 在此前&#xff0c;我学了一点点C语言还有简单的数据结构&#xff0c;如果有小伙伴想和我一起学习的&#xff0c;可以私信我交流分享学习资料 那么开启正题 今天分享的是关于vector的一些函数 1.构造函数 vector() …

go并发编程-runtime、Channel与Goroutine

1. runtime包 1.1.1. runtime.Gosched() 让出CPU时间片&#xff0c;重新等待安排任务(大概意思就是本来计划的好好的周末出去烧烤&#xff0c;但是你妈让你去相亲,两种情况第一就是你相亲速度非常快&#xff0c;见面就黄不耽误你继续烧烤&#xff0c;第二种情况就是你相亲速度…

电脑用的视频编辑软件有哪些 视频剪辑软件排行榜 视频剪辑软件推荐 视频剪辑培训学习 视频剪辑制作自学 电脑视频剪辑需要什么配置

电脑视频剪辑软件这么多&#xff0c;到底哪些比较好用&#xff1f;下面就让我们以十大电脑视频剪辑软件排行榜来细数好用的软件。另外&#xff0c;电脑视频剪辑需要什么配置&#xff1f;本文也会给大家从内存、CPU等参数上介绍&#xff0c;并推荐好用的电脑设备。 一、十大电脑…

Javaweb之SpringBootWeb案例之配置文件的详细解析

4. 配置文件 员工管理的增删改查功能我们已开发完成&#xff0c;但在我们所开发的程序中还一些小问题&#xff0c;下面我们就来分析一下当前案例中存在的问题以及如何优化解决。 4.1 参数配置化 在我们之前编写的程序中进行文件上传时&#xff0c;需要调用AliOSSUtils工具类&…

基于springboot+vue的校园赛事资讯网站(前后端分离)

博主主页&#xff1a;猫头鹰源码 博主简介&#xff1a;Java领域优质创作者、CSDN博客专家、公司架构师、全网粉丝5万、专注Java技术领域和毕业设计项目实战 主要内容&#xff1a;毕业设计(Javaweb项目|小程序等)、简历模板、学习资料、面试题库、技术咨询 文末联系获取 项目介绍…

【Python笔记-设计模式】建造者模式

一、说明 又称生成器&#xff0c;是一种创建型设计模式&#xff0c;使其能够分步骤创建复杂对象。允许使用相同的创建代码生成不同类型和形式的对象。 (一) 解决问题 对象的创建问题&#xff1a;当一个对象的构建过程复杂&#xff0c;且部分构建过程相互独立时&#xff0c;可…

leetcode-704.二分查找

题目 给定一个 n 个元素有序的&#xff08;升序&#xff09;整型数组 nums 和一个目标值 target &#xff0c;写一个函数搜索 nums 中的 target&#xff0c;如果目标值存在返回下标&#xff0c;否则返回 -1。 示例 1: 输入: nums [-1,0,3,5,9,12], target 9输出: 4 解释: 9 …

Web性能优化之如何评估网页性能——性能指标和度量工具介绍

前言 用户在访问 web 网页时&#xff0c;大部分都希望网页能够在一秒完成。事实上&#xff0c;加载时间每多 1 秒&#xff0c;就会流失 7%的用户。如果时间超过 8s 用户就会感到不耐烦、会放弃访问。这也就是著名的 “8秒原则”。 虽然当今设备及网络环境都大幅提升&#xff…