CSS-定位

最新推荐文章于 2022-07-30 17:03:59 发布

JINGJID

最新推荐文章于 2022-07-30 17:03:59 发布

阅读量487

点赞数

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

本文链接：https://blog.csdn.net/JINGJID/article/details/124068278

版权

本文介绍了CSS中的三种定位方式：相对定位、绝对定位和固定定位。相对定位是在原有位置基础上进行偏移，保持在标准流中；绝对定位基于父级或浏览器定位，不保留原有位置；固定定位则不会随页面滚动改变位置。

摘要由CSDN通过智能技术生成

1.相对定位

position: relative;

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

top ：10px ----距离上端10px的距离（向下偏移）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>相对定位</title>
<!--    相对于原来的位置进行偏移-->
    <style>
        body{
            padding: 20px;
            margin: 10px;
        }
        div{
            margin: 10px;
            padding: 5px;
            font-size: 12px;
            line-height: 25px;
        }
        #father{
            border: 3px dashed plum;
        }
        #first{
            border: 2px solid #4b54a8;
            /*相对定位：上下左右*/
            position: relative;
            /*距离上端*/
            top: -20px;
            /*距离左端*/
            left: 20px;
        }
        #second{
            border: 2px solid #4f8d60;
        }
        #third{
            border: 2

最低0.47元/天解锁文章

JINGJID

关注

0
点赞
踩
3

收藏

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

1.相对定位position: relative;相对于原来的位置进行指定的偏移，他仍然在标准流文档中，原来的位置会被保留top ：10px ----距离上端10px的距离（向下偏移）<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>相对定位</title><!-- 相对于原来的位置进行偏移--&g
复制链接

扫一扫

专栏目录