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

As977_2024-11-08 11:37

一、相对定位

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