前端学习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>
相关推荐
来金德瑞几秒前
快速掌握 ProseMirror 的核心概念
前端
ygria4 分钟前
样式工程化:如何实现Design System
前端·前端框架·前端工程化
墨渊君1 小时前
“蒙”出花样!用 CSS Mask 实现丝滑视觉魔法
前端·css
huabuyu2 小时前
基于 React + MarkdownIt 的 Markdown 渲染器实践:支持地图标签和长按复制
前端
芦苇Z2 小时前
HTML <a> 标签的 rel 属性全解析:安全、隐私与 SEO 最佳实践
前端·html
在这儿不行2 小时前
Android 15边到边模式
前端
源猿人2 小时前
企业级文件浏览系统的Vue实现:架构设计与最佳实践
前端·javascript·数据可视化
红红大虾2 小时前
Defold引擎中关于CollectionProxy的使用
前端·游戏开发
最后一个农民工2 小时前
vue3实现仿豆包模版式智能输入框
前端·vue.js