19、相对定位的使用及练习

最新推荐文章于 2024-10-18 19:19:52 发布

工一木子

最新推荐文章于 2024-10-18 19:19:52 发布

阅读量166

点赞数

分类专栏： CSS学习文章标签： html css

本文链接：https://blog.csdn.net/Prince140678/article/details/120393084

版权

CSS学习专栏收录该内容

24 篇文章 0 订阅

订阅专栏

6、定位

6.1、相对定位

1.默认情况/index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            div {
                margin:10px;
                padding:5px;
                font-size: 12px;
                line-height: 25px;
            }
            #father {
                border: 1px solid #666;
                padding: 0;

            }
            #first {
                border: 1px dashed #661b50;
                background-color: red;
            }
            #second {
                border: 1px dashed #426615;
                background-color: orange;
            }
            #third {
                border: 1px dashed #171a66;
                background-color: yellow;
            }
        </style>
    </head>
    <body>
        <div id="father">
            <div id="first">第一个盒子</div>
            <div id="second">第二个盒子</div>
            <div id="third">第三个盒子</div>
        </div>
    </body>
</html>

效果图：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eOaeaWlk-1632129256577)(C:\Users\Administrator\Desktop\学习笔记\前端学习\CSS\19、相对定位的使用及练习.assets\image-20210920171337658.png)]$

2.相对定位/index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
<!--        相对定位：相对于自己原来的位置进行偏移-->
        <style>
            body {
                padding: 20px;
            }
            div {
                margin:10px;
                padding:5px;
                font-size: 12px;
                line-height: 25px;
            }
            #father {
                border: 1px solid #666;
                padding: 0;

            }
            #first {
                border: 1px dashed #661b50;
                background-color: red;
                position: relative;/*相对定位，上下左右*/
                top:-20px;
                left:20px;
            }
            #second {
                border: 1px dashed #426615;
                background-color: orange;
            }
            #third {
                border: 1px dashed #171a66;
                background-color: yellow;
                position: relative;
                bottom: -10px;
                right: 20px;
            }
        </style>
    </head>
    <body>
        <div id="father">
            <div id="first">第一个盒子</div>
            <div id="second">第二个盒子</div>
            <div id="third">第三个盒子</div>
        </div>
    </body>
</html>