CSS------定位和动画

最新推荐文章于 2023-09-21 11:00:23 发布

没有阳光，也一样灿烂

最新推荐文章于 2023-09-21 11:00:23 发布

阅读量214

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/insist_to_learn/article/details/113139954

版权

6、定位

6.1、相对定位

相对定位：position：relative
相对于原来的位置，进行指定的偏移，相对定位任然在标准文档流中，原来的位置会被保留

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

        }
        #first{
    
            border: 2px solid #3d6694;
            background-color: #CE4A50;
            position: relative;/*相对定位*/
            top: 20px;/*距离上偏移20px*/

        }
        #second{
    
            border: 2px solid #CE4A50;
            background-color: #3d6694;

        }
        #three{
    
            border: 2px solid #3d6694;
            background-color: #CE4A50;

        }
    </style>
</head>
<body>
<div id="father">
    <div id="first">第一个盒子</d

最低0.47元/天解锁文章

没有阳光，也一样灿烂

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS------定位和动画

6、定位6.1、相对定位相对定位：position：relative相对于原来的位置，进行指定的偏移，相对定位任然在标准文档流中，原来的位置会被保留<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style&
复制链接

扫一扫