CSS常用标签 — 定位

最新推荐文章于 2023-07-18 16:42:56 发布

VIP文章 chenlei...

最新推荐文章于 2023-07-18 16:42:56 发布

阅读量1k

点赞数 3

分类专栏：基础学习文章标签： css css3 html

本文链接：https://blog.csdn.net/weixin_67614925/article/details/124715658

版权

文章目录

绝对定位
相对定位
固定定位
粘性定位
层叠元素
过渡

绝对定位

绝对定位，相对于第一个非 static 定位的父级元素进行定位，可以通过 top、right、bottom、left 这 4 个属性来设置元素相对于父级元素位置的偏移量。如果没有满足条件的父级元素，则会相对于浏览器窗口来进行定位。使用绝对定位的元素不会对其它元素造成影响。

<head>
    <style>
        * {
     
            margin: 0;
            padding: 0;
        }

        img {
     
            width: 300px;
        }

        div {
     
            position: absolute;
            top: 0px;
            left: 600px;
            border: 1px solid red;
            width: 600px;
            height: 600px;
        }

        #img1 {
     
            position: absolute;
            left: 100px;
            top: 100px;
        }
    </style>
</head>

<body>
    <div>
        <img src="/html/img/03.jpg" alt="" id="img1">
    </div>
    <img src="/html/img/04.jpg" alt="" id="img2">
</body>

在这里插入图片描述

相对定位

相对定位，即相对于元素的正常位置进行定位，您可以通过 top、right、bottom、left 这 4 个属性来设置元素相对于正常位置的偏移量，在此过程中不会对其它元素造成影响。

<head>
    <style>
        * {
     
            margin: 0;
            padding: 0;
        }

        img {
     
            width: 300px;
        }

        #img2 {
     
            position: relative;
            top: 600px;
            left: 300px;
        }
    </style>
</head>

<body>
    <img src="/html/img/04.jpg" alt="" id="img1">
    <img src="/html/img/04.jpg" alt="" id="img2">
    <img src="/html/img/04.jpg" alt="" id="img3">

</body>

在这里插入图片描述

绝对定位与相对定位的区别：
绝对定位好像把不同元素安排到了一栋楼的不同楼层(除首层，文本流放在首层)，它们之间互不影响；相对定位元素在首层，与文本流一起存放，它们之间互相影响。

被设置了绝对定位的元素，在文档流中是不占据空间的，如果某元素设置了绝对定位，那么它在文档流中的位置会被删除，它浮了起来，其实设置了相对定位也会让元素浮起来，但它们的不同点在于，相对定位不会删除它本身在文档流中占据的空间，其他元素不可以占据该空间，而绝对定位则会删除掉该元素在文档流中的位置，使其完全从文档流中抽了出来，其他元素可以占据其空间。

固定定位

固定定位，相对于浏览器的创建进行定位，可以使用 top、right、bottom、left 这 4 个属性来定义元素相对于浏览器窗口的位置。使用固定定位的元素无论如何滚动浏览器窗口元素的位置都是固定不变的。

<head>

最低0.47元/天解锁文章

chenlei...

关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS常用标签 — 定位

文章目录绝对定位相对定位固定定位粘性定位层叠元素过渡绝对定位绝对定位，相对于第一个非 static 定位的父级元素进行定位，可以通过 top、right、bottom、left 这 4 个属性来设置元素相对于父级元素位置的偏移量。如果没有满足条件的父级元素，则会相对于浏览器窗口来进行定位。使用绝对定位的元素不会对其它元素造成影响。<head> <style> * { margin: 0; padding:
复制链接

扫一扫