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

news2024/11/8 3:21:28

一、相对定位

使用相对定位的盒子会相对于自身原本的位置,通过偏移指定的距离,到达新的位置。盒子的本体仍处于文档流中。使用相对定位,除了要将 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.coloradmin.cn/o/2235496.html

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

相关文章

AJ-Report:一款开源且非常强大的数据可视化大屏和报表工具

嗨&#xff0c;大家好&#xff0c;我是小华同学&#xff0c;关注我们获得“最新、最全、最优质”开源项目和工作学习方法 AJ-Report是一个基于Java的开源报表工具&#xff0c;它集成了ECharts、Ant Design Vue等前端技术&#xff0c;致力于为企业提供一站式的数据可视化解决方案…

【深度学习】InstantIR:图片高清化修复

InstantIR——借助即时生成参考的盲图像修复新方法 作者:Jen-Yuan Huang 等 近年来,随着深度学习和计算机视觉技术的飞速发展,图像修复技术取得了令人瞩目的进步。然而,对于未知或复杂退化的图像进行修复,仍然是一个充满挑战的任务。针对这一难题,研究者们提出了 Insta…

MySQL utf8mb3 和 utf8mb4引发的问题

问题描述 Cause: java.sql.SQLException: Incorrect string value: \xF4\x8F\xBB\xBF-b... for column sddd_aaa_ark at row 1 sddd_aaa_ark 存储中文字符时&#xff0c;出现上述问题 原因分析 sddd_aaa_ark在数据库中结构是 utf8字符的最大字节数是3 byte&#xff0c;但是某些…

日语学习的难易程度

日语学习的难易程度是一个相对主观的问题&#xff0c;它受到多种因素的影响&#xff0c;包括个人的语言学习能力、学习方法、学习时间、学习资源的可获得性以及个人对日语文化的兴趣和投入程度等。以下是对日语学习难易程度的一些分析&#xff1a; 优点与易学之处 文字系统&am…

Win10 连接到 Ubuntu 黑屏无法连接 使用Rustdesk显示 No Displays 没有显示器

Win10 连接到 Ubuntu 黑屏无法连接 使用Rustdesk显示 No Displays 没有显示器 解决办法安装虚拟显示器 安装xorg虚拟显示器 $ sudo apt install xserver-xorg-video-dummy # 提示错误依赖使用下面这个试试 $ sudo apt-get install xserver-xorg-video-dummy --fix-missing配…

Ubuntu安装Python并配置pip阿里镜像教程 - 幽络源

背景 因为要部署yolov8项目到ubuntu系统&#xff0c;但是yolov8要求python版本必须大于3.10&#xff0c;因此ubuntu20.04自带的python3.8不可用&#xff0c;需自行安装python&#xff0c;本教程使用python源码编译式安装python3.12.3&#xff0c;原因是apt下载python无法指定目…

uniapp组件实现省市区三级联动选择

1.导入插件 先将uni-data-picker组件导入我们的HBuilder项目中&#xff0c;在DCloud插件市场搜索uni-data-picker 点击下载插件并导入到我们的项目中 2.组件调用 curLocation &#xff1a;获取到的当前位置&#xff08;省市区&#xff09; <uni-data-picker v-slot:defa…

力扣:94--中序遍历二叉树

树 – 二叉树 完全二叉树&#xff1a; 完全二叉树可以用数组完美匹配位置&#xff08;先序存储&#xff1a;根左右&#xff09;&#xff0c; 推论一 &#xff1a; 位置为k的节点&#xff0c;左孩子&#xff1a;2*k 1 &#xff0c;右孩子 &#xff1a; 2 * &#xff08;k 1&…

「C/C++」C/C++STL篇 之 数组赋值给std::vector多种方法

✨博客主页何曾参静谧的博客&#x1f4cc;文章专栏「C/C」C/C程序设计&#x1f4da;全部专栏「VS」Visual Studio「C/C」C/C程序设计「UG/NX」BlockUI集合「Win」Windows程序设计「DSA」数据结构与算法「UG/NX」NX二次开发「QT」QT5程序设计「File」数据文件格式「PK」Parasoli…

关于 Qt+Osg中使用背景图HUD受到后绘制几何图形顶点颜色影响 的解决方法

若该文为原创文章&#xff0c;转载请注明出处 本文章博客地址&#xff1a;https://hpzwl.blog.csdn.net/article/details/143607816 长沙红胖子Qt&#xff08;长沙创微智科&#xff09;博文大全&#xff1a;开发技术集合&#xff08;包含Qt实用技术、树莓派、三维、OpenCV、Op…

使用python向钉钉群聊发送消息

使用python向钉钉群聊发送消息 一、在钉钉群中新建机器人二、使用代码发送消息 一、在钉钉群中新建机器人 在群设置中添加机器人 选择自定义 勾选对应的安全设置 完成后会展示webhook&#xff0c;将地址复制出来&#xff0c;并记录&#xff0c;后面会用到 二、使用代码发送消…

第100+31步 ChatGPT学习:概率校准 Quantile Calibration

基于Python 3.9版本演示 一、写在前面 最近看了一篇在Lancet子刊《eClinicalMedicine》上发表的机器学习分类的文章&#xff1a;《Development of a novel dementia risk prediction model in the general population: A large, longitudinal, population-based machine-learn…

这款神器,运维绝杀 !!!

项目简介 CrowdSec 是一款开源的、基于社区协作的网络安全防护工具&#xff0c;它通过分析和共享IP信誉数据来对抗恶意行为。该软件不仅支持IPv6&#xff0c;而且相较于传统的Python实现&#xff0c;其采用Go语言编写&#xff0c;运行速度提升了60倍。CrowdSec 利用Grok模式解析…

Unreal5从入门到精通之如何在指定的显示器上运行UE程序

前言 我们有一个设备,是一个带双显示器的机柜,主显示器是一个小竖屏,可以触屏操作,大显示器是一个普通的横屏显示器。我们用这个机柜的原因就是可以摆脱鼠标和键盘,直接使用触屏操作,又可以在大屏观看,非常适合用于教学。 然后我们为这款机柜做了很多个VR项目,包括Uni…

R7:糖尿病预测模型优化探索

&#x1f368; 本文为&#x1f517;365天深度学习训练营 中的学习记录博客&#x1f356; 原作者&#xff1a;K同学啊 一、实验目的&#xff1a; 探索本案例是否还有进一步优化的空间 二、实验环境&#xff1a; 语言环境&#xff1a;python 3.8编译器&#xff1a;Jupyter notebo…

Django 框架:全方位技术分析

Django 框架:全方位技术分析 介绍 Django 是一个高级 Python Web 框架,鼓励快速开发和遵循设计的最佳实践。由经验丰富的开发人员打造,开源并可扩展,Django 旨在让构建 Web 应用更快、更轻松。 历史背景 Django 始于 2003 年,最初是 Lawrence Journal-World 报社的一个内…

如何用 ChatPaper.ai 打造完美的 AI 课堂笔记系统

作为学生&#xff0c;我们都遇到过这样的困扰&#xff1a;上课时记笔记太投入就听不进讲解&#xff0c;专注听讲又担心错过重要知识点。有了AI助手&#xff0c;这个问题就可以优雅地解决了。今天跟大家分享如何用ChatPaper.ai构建个人的智能课堂笔记系统。 为什么需要AI辅助记笔…

《手写Spring渐进式源码实践》实践笔记(第十六章 三级缓存解决循环依赖)

文章目录 第十六章 通过三级缓存解决循环依赖背景技术背景Spring循环依赖循环依赖类型三级缓存解决循环依赖 业务背景 目标设计一级缓存实现方案设计思路代码实现测试结果 三级缓存实现方案 实现代码结构类图实现步骤 测试事先准备属性配置文件测试用例测试结果&#xff1a; 总…

Java8新特性/java

1.lambda表达式 区别于js的箭头函数&#xff0c;python、cpp的lambda表达式&#xff0c;java8的lambda是一个匿名函数&#xff0c;java8运行把函数作为参数传递进方法中。 语法格式 (parameters) -> expression 或 (parameters...) ->{ statements; }实战 替代匿名内部类…

ubuntu双屏只显示一个屏幕另一个黑屏

简洁的结论&#xff1a; 系统环境 ubuntu22.04 nvidia-535解决方案 删除/etc/X11/xorg.conf 文件 记录一下折腾大半天的问题。 ubuntu系统是22.04,之前使用的时候更新驱动导致桌面崩溃&#xff0c;重新安装桌面安装不上&#xff0c;请IT帮忙&#xff0c;IT一番操作过后也表示…