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

一、相对定位

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

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

举个栗子

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

复制代码
<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>
相关推荐
禁默8 小时前
机器学习基础入门(第五篇):半监督学习与强化学习
人工智能·学习·机器学习
星哥说事8 小时前
开发者必备神器:阿里云 Qoder CLI 全面解析与上手指南
前端
Dcc8 小时前
构建可维护的 React 应用:系统化思考 State 的分类与管理
前端·react.js
笔尖的记忆8 小时前
【前端架和框架】react协调器reconciler工作原理
前端·javascript·面试
pepedd8648 小时前
我用Kiro+Claude写了一个MCP Server,让AI真正"感知"真实环境
前端·javascript·trae
CrabXin8 小时前
如何让你的前端应用像“永动机”一样保持登录状态?
前端·设计模式
San308 小时前
JavaScript 标准库完全指南:从基础到实战
前端·javascript·node.js
Never_Satisfied8 小时前
在JavaScript / Node.js中,Web服务器参数处理与编码指南
前端·javascript·node.js
进阶的鱼8 小时前
React+ts+vite脚手架搭建(五)【规范篇】
前端·react.js·vite
盼哥PyAI实验室8 小时前
序列的力量——Python 内置方法的魔法解密
java·前端·python