前端学习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>
相关推荐
q56731523几秒前
Koa+Puppeteer爬虫教程页面设计
javascript·css·爬虫
北北~Simple8 分钟前
第一次搭建数据库
服务器·前端·javascript·数据库
GanGuaGua14 分钟前
Vue3常用指令
前端·javascript·vue.js
欧阳天风14 分钟前
录音实时上传
前端·javascript
江号软件分享19 分钟前
从DNS到防火墙:NetDisabler多策略断网方法详解
前端
灵犀学长27 分钟前
解锁HTML5页面生命周期API:前端开发的新视角
前端·html·html5
每次的天空32 分钟前
Android-重学kotlin(协程源码第一阶段)新学习总结
开发语言·学习·kotlin
Brookty33 分钟前
【操作系统】线程
java·linux·服务器·后端·学习·java-ee·操作系统
江号软件分享36 分钟前
轻松解决Office版本冲突问题:卸载是关键
前端
致博软件F2BPM43 分钟前
Element Plus和Ant Design Vue深度对比分析与选型指南
前端·javascript·vue.js