前端学习Day12 CSS盒子的定位(相对定位篇“附练习”)

一、相对定位

使用相对定位的盒子会相对于自身原本的位置,通过偏移指定的距离,到达新的位置。盒子的本体仍处于文档流中。使用相对定位,除了要将 position 属性值设置为 relative 外,还需要指定一定的偏移量。其中,水平方向的偏移量由 lett right 属性指定;垂直方向的偏移量由 top  bottom 属性指定。

⚠️:两个方向各选一个参数即可定位;定位的数值可以为负数。

举个栗子

① 先放三个盒子,注意盒子的位置为“自上向下排列”。前面的知识点有提过“块元素一般从上到下排列摆放”。

<head><style>div{width: 100px;height: 100px;border: 5px rgb(61, 148, 247) solid;}<style>
</head>
<body><div></div><div></div><div></div>
</body>

运行结果: 

② 然后我们设置一下第一个盒子的颜色和相对定位。

<head><style>#div1{border: 5px rgb(241, 76, 175) solid;position:relative;  /*设置相对定位*/left: 70px;  /*距离父容器左端70px*/top: 50px;   /*距离父容器顶端50px*/}</style>
</head>
<body><div id="div1"></div>
</body>

 可以看到盒子相对于父容器产生了偏移。注意这时下面的盒子并没有往上移动,仍在原来的位置。这是由于盒子的本体仍处于文档流中。

做个小练习

老规矩先看图自己敲出代码,不懂再看代码~

<head><style>img{width: 100px;height: 100px;/* 盒子边框的厚度 颜色 样式 */border: 2px red solid;left: 10px;}#img1{width: 100px;height: 100px;border: 6px rgba(132, 230, 166, 0.815) solid;}#img2{width: 100px;height: 100px;border: 6px rgba(235, 238, 140, 0.858) solid;position:relative;left: 70px;top: 50px;}#img3{width: 100px;height: 100px;border: 6px rgba(125, 225, 231, 0.815) solid;position:relative;left: 10px;}</style>
</head>
<body><img src="./苹果.jpg" id="img1"><img src="./苹果.jpg" id="img2"><img src="./苹果.jpg" id="img3"><br><img src="./苹果.jpg"><img src="./苹果.jpg"><img src="./苹果.jpg">
</bdoy>

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

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

相关文章

基于微信小程序的移动学习平台的设计与实现+ssm(lw+演示+源码+运行)

摘 要 由于APP软件在开发以及运营上面所需成本较高&#xff0c;而用户手机需要安装各种APP软件&#xff0c;因此占用用户过多的手机存储空间&#xff0c;导致用户手机运行缓慢&#xff0c;体验度比较差&#xff0c;进而导致用户会卸载非必要的APP&#xff0c;倒逼管理者必须改…

git 工具原理

git 目录 git git的使用 了解git的三个区域 具体操作 如何下载别人上传到git的工程 -- 可以参考菜鸟教程&#xff0c;包括安装配置git Git 安装配置 | 菜鸟教程 -- Git 是一种分布式版本控制系统&#xff0c;用于管理软件项目的源代码。它是由 Linux 之父 Linus Torval…

Linux操作系统:学习进程_对进程的深入了解

目录 前言 开篇 一、进程概念 二、进程的描述与管理 1、如何描述与管理 2、Linux中的PCB-task_struct 3、对进程组织的理解 三、进程的属性 1、系统创建进程 2、查看进程 3、进程的标识符 4、退出进程 1>ctrlc 2>kill命令杀死进程 5、用户进程的创建方式…

力扣:225 用队列实现栈

栈、队列 栈&#xff1a; 弹夹&#xff0c;后进先出 队列&#xff1a; 排队&#xff0c;先进先出 描述&#xff1a; var MyStack function () {// 定义两个数组&#xff0c;模拟队列this.queue []this._queue [] };/** * param {number} x* return {void}*/ MyStack.protot…

lora训练模型 打造个人IP

准备工作 下载秋叶炼丹器整理自己的照片下载底膜 https://rentry.org/lycoris-experiments 实操步骤 解压整合包 lora-scripts,先点击“更新” 训练图片收集 比如要训练一个自己头像的模型&#xff0c;就可以拍一些自己的照片&#xff08;20-50张&#xff0c;最少15张&…

IO 多路复用技术:原理、类型及 Go 实现

文章目录 1. 引言IO 多路复用的应用场景与重要性高并发下的 IO 处理挑战 2. IO 多路复用概述什么是 IO 多路复用IO 多路复用的优点与适用场景 3. IO 多路复用的三种主要实现3.1 select3.2 poll3.3 epoll三者对比 4. 深入理解 epoll4.1 epoll 的三大操作4.2 epoll 的核心数据结构…

大数据新视界 -- 大数据大厂之 Impala 性能优化:从数据压缩到分析加速(下)(8/30)

&#x1f496;&#x1f496;&#x1f496;亲爱的朋友们&#xff0c;热烈欢迎你们来到 青云交的博客&#xff01;能与你们在此邂逅&#xff0c;我满心欢喜&#xff0c;深感无比荣幸。在这个瞬息万变的时代&#xff0c;我们每个人都在苦苦追寻一处能让心灵安然栖息的港湾。而 我的…

信息学奥赛一本通 1395:烦人的幻灯片(slides)

【题目链接】 ybt 1395&#xff1a;烦人的幻灯片(slides) 【题目考点】 1. 图论&#xff1a;拓扑排序 【解题思路】 先理解题意&#xff1a; 如图&#xff0c;每张幻灯片是一个矩形&#xff0c;在该矩形范围内有一个位置写了这张幻灯片的编号。但实际情况是幻灯片是透明…

DB-GPT系列(三):底层大模型设置(开源模型、在线模型)

前面两篇文章分别对 DB-GPT 的总体情况进行了介绍&#xff0c;同时涵盖了镜像一键部署与源码部署这两种部署方式。 DB-GPT系列&#xff08;一&#xff09;&#xff1a;DB-GPT能帮你做什么&#xff1f; DB-GPT系列&#xff08;二&#xff09;&#xff1a;DB-GPT部署&#xff0…

LabVIEW配电产品精度测试系统

开发了一种基于LabVIEW平台的配电产品精度测试系统&#xff0c;通过自动化测试流程实现更高的测试准确性与效率。系统采用串口和TCP通信技术&#xff0c;与多功能交流采样变送器和配电设备无缝数据交互&#xff0c;提升了测试工作的可靠性和一致性。 一、项目背景 在配电产品…

详解Java之Spring MVC篇二

目录 获取Cookie/Session 理解Cookie 理解Session Cookie和Session的区别 获取Cookie 获取Session 获取Header 获取User-Agent 获取Cookie/Session 理解Cookie HTTP协议自身是“无状态”协议&#xff0c;但是在实际开发中&#xff0c;我们很多时候是需要知道请求之间的…

【大数据学习 | kafka】kafka的偏移量管理

1. 偏移量的概念 消费者在消费数据的时候需要将消费的记录存储到一个位置&#xff0c;防止因为消费者程序宕机而引起断点消费数据丢失问题&#xff0c;下一次可以按照相应的位置从kafka中找寻数据&#xff0c;这个消费位置记录称之为偏移量offset。 kafka0.9以前版本将偏移量信…

RabbitMQ 管理平台(控制中心)的介绍

文章目录 一、RabbitMQ 管理平台整体介绍二、Overview 总览三、Connections 连接四、Channels 通道五、Exchanges 交换机六、Queues 队列查看队列详细信息查看队列的消息内容 七、Admin 用户给用户分配虚拟主机 一、RabbitMQ 管理平台整体介绍 RabbitMQ 管理平台内有六个模块&…

推荐一款强大的图像处理软件:Adobe Photoshop2025

AdobePhotoShop赛博日落版是一款强大的图像处理软件&#xff0c;专为用户提供多种先进的图像编辑功能。该版本包含了最新的AI移除工具、AI查找干扰功能以及Neural Filters神经滤镜插件&#xff0c;旨在提升用户的创作效率和成品效果。 主要功能 - AI创意填充&#xff1a;该功能…

PC模块静电放电测试中的宕机黑屏

静电放电(ESD)是电子设备中常见且难以避免的干扰源之一,尤其是在复杂的电子系统中,它对系统的稳定性和可靠性影响极大。近期,在进行静电放电(6KV接触放电、15KV空气放电)测试时,某P C模块在多个端子(如USB、RJ45、HDMI及耳机端子)遭遇了显示黑屏、图像异常及系统宕机…

吴恩达深度学习笔记:卷积神经网络(Foundations of Convolutional Neural Networks)4.7-4.8

目录 第四门课 卷积神经网络&#xff08;Convolutional Neural Networks&#xff09;第四周 特殊应用&#xff1a;人脸识别和神经风格转换&#xff08;Special applications: Face recognition &Neural style transfer&#xff09;4.7 深度卷积网络学习什么&#xff1f;&am…

适用于个人或团队的文档管理和知识库系统,NAS快速部署『BookStack』

适用于个人或团队的文档管理和知识库系统&#xff0c;NAS快速部署『BookStack』 哈喽小伙伴们好&#xff0c;我是Stark-C~ 知识库对于很多需要和文字打交道的个人或者团队都不陌生对吧&#xff1f;对于我们个人来说&#xff0c;它可以将常用的学习资料、工作笔记、项目计划和…

并发编程的基础:深入理解内存屏障(Memory Barriers)

内存屏障是一种基础语言&#xff0c;在不同的计算机架构下有不同的实现细节。本文主要在x86_64处理器下&#xff0c;通过Linux及其内核代码来分析和使用内存屏障 对大多数应用层开发者来说&#xff0c;“内存屏障”&#xff08;memory Barrier&#xff09;是一种陌生&#xff…

Windows转Mac过渡指南

最近由于工作原因开始使用mac电脑&#xff0c;说实话刚拿到手的时候&#xff0c;window党表示真的用不惯。坚持用一下午之后&#xff0c;发现真的yyds&#xff0c;这篇文章说说mac电脑的基本入门指南。 1. 不会使用mac的触摸板&#xff0c;接上鼠标发现滚轮和windows是反的。 …

poi excel数据统计导出

##poi excel导出案例 1.ajxa导出请求没有任何反应&#xff0c;打断点看了workBook中也有数据&#xff0c;网上查阅说ajax请求导出无法接收流&#xff0c;换成location.href,果然可以了 2.控制器代码 response.setCharacterEncoding("UTF-8");response.setContentTyp…